2017.08.14

Bootstrap 4 的 Grid 應用介紹

文章索引

Bootstrap 4 從去年釋出 BETA 版後，到現在幾乎所有功能都齊全了，官方也釋出了詳細的 BETA 網站與文件，感覺 Bootstrap 4 距離正式定案的時間也不久遠啦 😀

為什麼 Bootstrap 4 的出現如此引人注目呢？因為之前 V2 到 V3 只是「增強」，但 V3 到 V4 卻是「改革」，Bootstrap 4 用的技巧與 CSS 語法都有大幅度的革新，所以用慣 Bootstrap 3 的朋友勢必要重新學習(就像我XDDD)。以我為例，我自己比較常用 Bootstrap 的 Grid System (網格系統)，因此這次的筆記也會以 Grid System 為主，介紹一下 V3 與 V4 之間的差異。

Bootstrap 4 的一個重大改變，就是使用了 CSS 的 Flexbox 重新排版定義 Grid，關於 Flexbox 的介紹，可以參考我之前的文章：CSS Flexbox 介紹與解析。
承上，因為 IE9 並不支援 Flexbox，所以如有需要使用 IE9，就請繼續使用 Bootstrap V3 版本。

斷點(Breakpoint)的調整

Bootstrap 3 的斷點與前綴詞

	Extra Small	Small	Medium	Large
斷點範圍	0 ~ 767 px	768 ~ 991 px	992 ~ 1199 px	1200 px 以上
前綴詞	col-xs	col-sm	col-md	col-lg

Bootstrap 4 修改如下

	Extra Small	Small	Medium	Large	Extra Large
斷點範圍	0 ~ 575 px	576 ~ 767 px	768 ~ 991 px	992 ~ 1199 px	1200 px 以上
前綴詞	col-	col-sm	col-md	col-lg	col-xl

☞ 差異

新增了一個 576px 作為最小的斷點
Extra Small 由 col-xs-* 改為 col-*
新增了 Extra Large，前綴詞為 col-xl-*

可以自動的平均分配欄寬

以往使用 Bootstrap 3 時，每一個 col-md-* 後面一定要帶數字，數字表示欄寬。但 Bootstrap 4 因為使用了 CSS Flexbox，所以不輸入數字 = 平均分配欄寬。

以下來個簡易範例：

▼ Bootstrap 3：需要輸入「數字」才能知道寬度

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

▼ Bootstrap 4：不需輸入數字就能根據 col 的數量分配欄寬

<div class="row">
  <div class="col-md"></div>
  <div class="col-md"></div>
  <div class="col-md"></div>
</div>

▼ Bootstrap 4 ：可以只設定其中一個欄寬，剩下的平均分配

<div class="row">
  <div class="col-md"></div>
  <div class="col-md-5"></div>
  <div class="col-md"></div>
</div>

範例

See the Pen rzGjNE by MUKi (@mukiwu) on CodePen.

動態調整欄寬

除了能平均分配欄寬外，還能根據文字寬度，動態的調整欄寬。這是 Bootstrap 4 的新語法，使用的是 col-md-auto。

<div class="col-md">A</div>
  <div class="col-md-auto">Hello World / Nice to Meet you</div>
<div class="col-md">C</div>

也可以把我們之前熟悉的各種斷點給加進來，做出更多的螢幕寬度變化：

<div class="row">
  <div class="col col-lg-2">
    A
  </div>
  <div class="col-12 col-lg-auto">
    Hello World
  </div>
  <div class="col col-lg-5">
    C
  </div>
</div>

範例

See the Pen MvEJJd by MUKi (@mukiwu) on CodePen.

讓 Column 換行

安插一個空的 DIV，CLASS 名稱為 w-100，就可以讓 Column 強制換行

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
  <div class="col">E</div>
  <div class="w-100"></div>
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

範例

See the Pen prWRaX by MUKi (@mukiwu) on CodePen.

垂直對齊

前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。

align-items-start：置頂
align-items-center：置中
align-items-end：置底

▼ 直接在 row 裡面寫上 align-items-* 的 CLASS 即可。

<div class="row align-items-start">
  <div class="col">AA</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

<div class="row align-items-center">
  <div class="col">A</div>
  <div class="col">BB</div>
  <div class="col">C</div>
</div>

<div class="row align-items-end">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">CC</div>
</div>

▼ 另外我們也可以改用 align-self-* 在 col 裡面單獨針對 Column 做對齊的動作

align-self-start：置頂
align-self-center：置中
align-self-end：置底

<div class="row">
  <div class="col align-self-start">A</div>
  <div class="col align-self-center">B</div>
  <div class="col align-self-end">C</div>
</div>

透過範例可以發現 A, B, C 三個 column 不會相互影響，A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例，輸入多行文字後，他真的就是從中間平均的往上下展開唷！

範例

See the Pen NvadMo by MUKi (@mukiwu) on CodePen.

水平對齊

有垂直對齊就一定會有水平對齊(廢話XD)，所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

justify-content-start：靠左對齊
justify-content-center：置中對齊
justify-content-end：靠右對齊
justify-content-around：分散對齊(含左右)
justify-content-between：分散對齊(不含左右)

<div class="row justify-content-start">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-center">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-end">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-around">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

<div class="row justify-content-between">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

範例

See the Pen MvEpYy by MUKi (@mukiwu) on CodePen.

移除 gutter

Bootstrap 的 row 跟 column 分別有使用 margin 以及 padding 當作 gutter，讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求，我們希望 column 是緊密黏在一起的，所以 V4 新增了 no-gutters 這個 class，可以讓我們移除 gutter

<div class="row no-gutters">
  <div class="col">A</div>
  <div class="col">B</div>
</div>

直接將no-gutters放在row就可以囉，因為語法跟效果很直覺，所以就不上 codepen 範例惹(~~絕對不是因為懶~~)

Column 排序

以前如果要將排序會用 pull 跟 push 在那邊推來推去的，現在一樣因為使用了 Flexbox 的關係，在使用上也更方便了！

flex-unordered：不排序
flex-first：第一個
flex-last：最後一個

<div class="row">
  <div class="col flex-unordered">
    我應該是第一個，但我不排序
  </div>
  <div class="col flex-last">
    我應該是第二個，但我會排在最後
  </div>
  <div class="col flex-first">
    我應該是第三個，但我會排在最前面
  </div>
</div>

範例

See the Pen wqrJEa by MUKi (@mukiwu) on CodePen.

這邊要特別注意的是，如果使用 flex 排序，寬度縮小時也會持續這個排序模式，column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%，還是可以使用 V3 的 push 以及 pull，不過在 V4 的寫法有一點調整，將前綴位置放到後面(原本是 col-md-push-* )：

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

☞ 補充

offset 也一樣將前綴往後放。

後記

Bootstrap 4 的 Grid 介紹就到此告一段落囉，有一些功能我沒有特別提到，例如 Wrapping、Nested，是因為跟 V3 相比沒有太大的改變，就不額外寫出來了。

Bootstrap 的功能非常強大，是一個堪稱超完整的 Framework，但我自己只有使用它的 Grid System，所以就只介紹 Grid 在 V3 與 V4 之間的差異囉 ^Q^。

那麼對文章有任何不懂的地方，也歡迎留言告訴我唷，謝謝 ^_^