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-*）
//Bootstrap 3
<div class="row">
<div class="col-xs-6">no offset</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3">.col-xs-offset-3</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-6">.col-xs-offset-6</div>
</div>
//Bootstrap 4
<div class="row justify-content-start">
<div class="col-6">.justify-content-start</div>
</div>
<div class="row justify-content-center">
<div class="col-6">.justify-content-center</div>
</div>
<div class="row justify-content-end">
<div class="col-6">.justify-content-end</div>
</div>
v4提供的其他形式：
．between：剩餘空間平均分配在items之間。
．around：剩餘空間平均分配並圍繞在items周圍。
垂直方向（Align）
v3：並沒有特別提供垂直方向的排版方法。
v4：兩種方法，從父元素設定 .align-items-*（start、center、end），或從單獨的子項目設定 .align-self-*（start、center、end）。
//從父元素設定（內部所有cols會一起對齊該設定）
<div class="d-flex align-items-start">.align-items-start</div>
<div class="d-flex align-items-center">.align-items-center</div>
<div class="d-flex align-items-end">.align-items-end</div>
//從子項目設定
<div class="d-flex">
<div class="align-self-start">.align-self-start</div>
<div class="align-self-center">.align-self-center</div>
<div class="align-self-end">.align-self-end</div>
</div>
排序
v3：排序 col 是透過 push、pull 來設計，需要計算好欄數的位移量才能設定。
v4：提供了更直觀的三種排序，first、last、unordered（排在first與last之間）。
（若需要更複雜的排序則使用 push、pull 或是直接設定各項order屬性之值。需注意 pull、push 在v4的語法已經更新為 .push-md-*、.pull-md-*）
//Bootstrap 3
<div class="row">
<div class="col-xs-4 col-xs-push-8">first</div>
<div class="col-xs-4 col-xs-pull-4">second</div>
<div class="col-xs-4 col-xs-pull-4">third</div>
</div>
//Bootstrap 4
<div class="row">
<div class="col flex-last">first</div>
<div class="col flex-first">second</div>
<div class="col flex-unordered">third</div>
</div>
小提醒：
• 以上三種排列方式的前提為父元素要是flexbox container（如 row 已預設），若不是則直接在父元素加上 .d-flex 即可。
• 還有很多flexbox帶來的新功能可以自己去看看，就不多做介紹囉～
三、改善網格系統與單位
• 自動等寬等高的欄位。
v3：需要指定每個欄位的寬度、計算好每列的12欄該如何分配。
v4：可以直接使用 .col 或 .col-* ，就會自動算好欄寬，並均分剩餘的空位；欄高會預設為等高。（仍可搭配使用v3的方式指定欄位寬度，如下圖v4的第四列。）
//僅示範上圖之下兩列
//Bootstrap 3
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-3">.col-xs-3</div>
<div class="col-xs-3">.col-xs-3</div>
</div>
//Bootstrap 4
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col-6">.col-6</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
• 加入新的節點 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。
