2017.08.14
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 之間的差異。
Extra Small | Small | Medium | Large | |
---|---|---|---|---|
斷點範圍 | 0 ~ 767 px | 768 ~ 991 px | 992 ~ 1199 px | 1200 px 以上 |
前綴詞 | col-xs | col-sm | col-md | col-lg |
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
作為最小的斷點col-xs-*
改為 col-*
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.
安插一個空的 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.
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 範例惹(絕對不是因為懶)
以前如果要將排序會用 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^。
那麼對文章有任何不懂的地方,也歡迎留言告訴我唷,謝謝 ^_^