Bootstrap 4 的 Grid 應用介紹

Intro

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 之間的差異。

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

斷點(Breakpoint)的調整

▼ Bootstrap 3 的斷點與前綴詞如下:

 Extra SmallSmallMediumLarge
斷點範圍0 ~ 767 px768 ~ 991 px992 ~ 1199 px1200 px 以上
前綴詞col-xscol-smcol-mdcol-lg

.

▼ Bootstrap 4 修改如下:

 Extra SmallSmallMediumLargeExtra Large
斷點範圍0 ~ 575 px576 ~ 767 px768 ~ 991 px992 ~ 1199 px1200 px 以上
前綴詞col-col-smcol-mdcol-lgcol-xl

.

差異

  1. 新增了一個576px作為最小的斷點
  2. Extra Small 由col-xs-*改為col-*
  3. 新增了 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="row">
  <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>

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

<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">A<br />A</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">B<br />B</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">C<br />C</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.


(因為範例與語法較多,因此分成多頁撰寫,請繼續點擊下一頁觀看文章)