Bootstrap 4 新功能簡介

Bootstrap 4 重寫了非常多內容,多了哪些新東西?又有哪些部份被捨棄了?
還不知道有哪些重大變革的朋友們可別錯過了!

讓我們來一起看看吧!

在2017年1月,Bootstrap 4釋出了最新的Alpha 6版本!(終於有比較穩的版本了:D)

目前進展:


也可以直接去官方關心進度,Beta版本看樣子很快也要釋出了!


重要革新


一、拋棄Less,改用Sass

•  以Ruby開發的Sass,讓Bootstrap 4的編譯速度比以前更快。


二、擁抱flexbox

•  以強大排版工具 flexbox(CSS3)為基礎(取代 table、floats…),重寫了整個網格系統與重要的組件(如:nav、button group、list group等)

•  也代表捨棄對 IE9(以下)的支持。(如果非得支援IE,如銀行網站,只能繼續使用v3)

flexbox為v4帶來:

•  自動等寬等高的欄位。(待下一段網格系統時說明)

•  排列(對齊、排序、置中)變得更簡單。

減少使用 clear: both 解決 floats 奇怪的 collapse 問題;解決在v3難以達成的對齊效果;置中不再需要囉唆的 translate 或 margin;也能更直觀地設計排列順序。


水平方向(Justify content)

v3:透過 offset 設定子元素 col 的位移,需要計算好向右位移的欄數才能設定。

v4:透過更直觀的 .just-content-*(start、center、end) 設定在父元素裡,並提供更多種形式。(仍可繼續使用 offset 來設計,但要記得在 v4 的語法已更新為 .offset-md-*)

v4提供的其他形式:

.between:剩餘空間平均分配在items之間。

.around:剩餘空間平均分配並圍繞在items周圍。


垂直方向(Align)

v3:並沒有特別提供垂直方向的排版方法。

v4:兩種方法,從父元素設定 .align-items-*(start、center、end),或從單獨的子項目設定 .align-self-*(start、center、end)。


排序


v3:排序 col 是透過 push、pull 來設計,需要計算好欄數的位移量才能設定。

v4:提供了更直觀的三種排序,first、last、unordered(排在first與last之間)。

(若需要更複雜的排序則使用 push、pull 或是直接設定各項order屬性之值。需注意 pull、push 在v4的語法已經更新為 .push-md-*、.pull-md-*)


小提醒

•   以上三種排列方式的前提為父元素要是flexbox container(如 row 已預設),若不是則直接在父元素加上 .d-flex 即可。

•   還有很多flexbox帶來的新功能可以自己去看看,就不多做介紹囉~


三、改善網格系統與單位

•  自動等寬等高的欄位。

v3:需要指定每個欄位的寬度、計算好每列的12欄該如何分配。

v4:可以直接使用 .col 或 .col-* ,就會自動算好欄寬,並均分剩餘的空位;欄高會預設為等高。(仍可搭配使用v3的方式指定欄位寬度,如下圖v4的第四列。)

 


•  加入新的節點 xl(col-xl-*)。

現在一共有五個斷點可以運用。值得注意的是,雖然是往上多了更大的名稱 xl ,實際上是向下擴大 media query 的控制範圍至 544px(or 34em)。

換句話說,現在v4的.col-lg-6 就等同是v3的.col-md-6。


Extra small (xs) – below 576px

Small (sm) – between 576px and 768px

Medium (md) – between 768px and 992px

Large (lg) – between 992px and 1200px

Extra Large (xl) – over 1200px


•  主要單位從 px 改為 rem

除了斷點(media queries)和網格系統這類會被實際viewports影響的仍使用px為單位以外,其他主要單位都從 px 改為 rem。


四、推出強大的 Card 組件

•  v4推出的新組件 .card 取代了原有v3的.panel、.well 與 .thumbnail。

•  Card 內部:可輕鬆帶入多元的內容(如:照片、文字、nav)與設計(如:浮在照片上的文字)。

•  Cards 排列:輕鬆達成等寬等高、多列的佈局與設計,也多了瀑布流式(Masonry-like)可使用。

•  更多詳細的功能與效果直接去官網看看吧!


五、重新設計綴詞

•  取消了 -xs 綴詞(以 .col-* 取代 .col-xs-* )。因為 xs 並不像 sm、md、lg或xl,是為了增加自適應 styles 而存在的節點,因此 .col 會比 .col-xs 更恰當地表達它的正確含義。

•  以property-value pairings(property: value;)的方式,更直觀地命名相關的 class 名稱。如:

..justify-content-between 即為 justify-content: between。

..col-md-push 、 .col-md-pull-* 改為 .push-md-*、.pull-md-*。


六、Bootstrap主題

除此之外,Bootstrap 4 還發佈了三種官網主題,不過每種主題要價$99。