前言

昨天文章提到今天要來講 Grid + Media Query = 輕鬆達成 RWD！
(PS. 不太知道 Media Query 的人可以參考之前大大在鐵人賽寫的這篇文章 → Day22：小事之 Media Query )

講今日主題之前還是想讓大家回想一下，
以往純 HTML/CSS 寫 RWD 我們會怎麼寫？

一樣拿簡單例子舉例一下，
原本長這樣：

[HTML]

<ul class="ul">
  <li class="li">1</li>
  <li class="li">2</li>
  <li class="li">3</li>
  <li class="li">4</li>
</ul>

[CSS]

.ul {
  display: flex;
  list-style: none;
}

.li {
  width: 23%;
  margin: 1%;
  background-color: pink;
  padding: 10px;
}

如果現在我想寫成手機版每一欄寬度就變成 48%，
該怎麼寫？

這時候在 CSS 多加這一段：

@media(max-width: 375px){
	.block {
		width: 48%;
	}
}

我們會在 CSS 寫 @media(max-width: ...px){} 像這樣的語法，
這個意思是說，
畫面寬度最大頂到 375 px，比 375 px 小的話就吃這邊的樣式。
(PS. 375 px 是 iPhone 5 的寬度)

(當然也有 @media(min-width: ...px){} 這樣的寫法，
意思就相反，意思是最小到 375 px，比 375 px 大的話就吃這邊的樣式。)

所以當我故意把畫面縮小至比 375 px 小的時候，
.block 寬度就變為 48%，就從一列 4 個排成一列 2 個。

本日正文

但你知道，Bootstrap Grid 也有語法支援各裝置斷點，而且寫法非常簡單嗎？

拿上面例子來用 Bootstrap Grid 改寫，
一開始在 HTML 這樣寫：

[HTML]

<div class="row">
  <div class="col bg-info border py-2">1</div>
  <div class="col bg-info border py-2">2</div>
  <div class="col bg-info border py-2">3</div>
  <div class="col bg-info border py-2">4</div>
</div>

如果現在平板、電腦我都想讓它們一列 4 個，
手機版才要變為一列 2 個，
要在 class 的地方將 col 改成 col-6 col-md-3，
像這樣：

<div class="row">
  <div class="col-6 col-md-3 bg-info border py-2">1</div>
  <div class="col-6 col-md-3 bg-info border py-2">2</div>
  <div class="col-6 col-md-3 bg-info border py-2">3</div>
  <div class="col-6 col-md-3 bg-info border py-2">4</div>
</div>

這個意思是，一般情況寬度都要佔 6 格，
當畫面寬度比 md 大的時候寬度就變成佔 3 格。

那你可能會問說 md 是什麼，
意思是畫面寬度的裝置縮寫，
Bootstrap Grid 語法中有 .col- .col-sm- .col-md- .col-lg- .col-xl-
而畫面寬度跟 class 的對照表可以參考這裡 Grid options

這邊我當初也花很多時間才理解，
因此再多給幾個情境題練習看看好了。

現在把欄位從 4 個變成 6 個，

<div class="row">
  <div class="col-6 col-md-3 bg-info border py-2">1</div>
  <div class="col-6 col-md-3 bg-info border py-2">2</div>
  <div class="col-6 col-md-3 bg-info border py-2">3</div>
  <div class="col-6 col-md-3 bg-info border py-2">4</div>
  <div class="col-6 col-md-3 bg-info border py-2">5</div>
  <div class="col-6 col-md-3 bg-info border py-2">6</div>
</div>

如果現在我想要大螢幕(lg)時，
讓這個 6 欄可以並成一列，
在平板/電腦版 (md) 一列 4 個，
在手機版 一列 2 個，
該怎麼做？

Bootstrap Grid 的語法是比 XXX px 大才會進行變化，
所以先想比較大的語法怎麼寫，
12/6=2，所以在 lg 的時候每一欄佔 2 格，
12/4=3，所以在 md 的時候每一欄佔 3 格，
其他情況就是 12/2=6，這樣就可以達到在 md 以下每一欄佔 6 格。

所以只要在剛剛 col-6 col-md-3 的後面加上 col-lg-2 即可，
像這樣：

<div class="row">
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">1</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">2</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">3</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">4</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">5</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">6</div>
</div>

示範：746 px

746 px < 768 px，所以不吃 md, lg 的設定，吃 col-6 的設定

示範：771 px

771 px > 768 px，所以吃 col-md-3 的設定

示範：993 px

993 px > 992 px，所以吃 col-lg-2 的設定

因為現在大家用手機的需求很高，
甚至比電腦多，
因此在設計網頁或 APP 時一定要考慮 RWD，
Bootstrap Grid 使用 col-xx-? 就這樣輕鬆達成 RWD 的要求，
是不是很方便呢？

這邊光用看的可能還是不太好懂，
多練習應該就會比較了解了~
今天的文章就到這邊，
預計明天會將 Bootstrap 的部份告一段落，
進入 Reactstrap 囉~
那我們明天再見啦！

附上本日 CodePen 連結：
Day7 - HTML/CSS
Day7 - Bootstrap

後記

好不容易才跟 Bootstrap, Reactstrap 作朋友(?)的我，
今天收到前輩的消息說要改用 Chakra 這個套件=口=
沒關係，我覺得還是還是從 Bootstrap, Reactstrap 這樣學會比較好上手，
之後我相信要改什麼套件就不會是太大的問題了！
(PS. 去年隊友到今天依然沒發現我今年偷偷報名的事XD)