Bootstrap 4 排版三大亮點深度解析
近年來熱門的前端框架 Bootstrap 自 2015/12/8 發表了 Bootstrap 4 Alpha 1 版本之後，又經過了一年多，在 2017/10/19 發表了Bootstrap 4 Beta 2 版本，並且 Beta 3 已正在進行，根據官方表示希望在 Beta 3 版本後可以發行最終版本，相信目前的版本已經相當接近完成！
而 Bootstrap 4 可說是進行了非常大幅度的變更，例如遷移至 Sass 、對於 Flexbox 的支援、使用 ES6 重寫所有 Javascript 插件、新元素 Cards 、放棄支援 IE8 、改進網格系統 … 等，本文將會挑出 Bootstrap 4 在排版方面的三大亮點「網格系統 ( Grid System ) 」、「垂直水平對齊 ( align & justify ) 」與「新元素 “卡片” ( Cards ) 」進行詳細介紹。
結合 flexbox 後有了新樣貌的網格系統 ( Grid System )
網格系統雖然已經不是新玩意了，但 Bootstrap 4 使用了 flexbox 重新建立新的網格系統，一樣的符合響應式設計，並且能夠更方便的實現等高&對齊置中效果。
以下表格可以清楚看到 Bootstrap 4 如何在不同大小的裝置上運作
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | |
|---|---|---|---|---|---|
| container最大寬 | 自動 | 540px | 720px | 960px | 1140px |
| Class設定 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
原本的
.col-xs-已消失，取而代之的.col-*在語意上代表的差別是「從最小設備到最大設備都相同的網格」，不過 Bootstrap 4 與 Bootstrap 3 是相容的，所以過去的.col-xs-*還是可以使用。新增了支援超大型裝置的 extra large (xl) ，成為五個 RWD 中斷點。
過去需要計算好每列的12欄該如何分配並設定
.col-*，在 Bootstrap 4 可以直接使用.col或.col-*，沒有設定數字比例的欄位會自動成為等寬且等高的欄位。
例如：
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
若想指定只在某一個裝置寬度才自動調整寬度時，可使用 col-{breakpoint}-auto
例如：
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
結合 Flexbox 後實現超便利垂直&水平對齊 ( align & justify )
在 CSS3 發表 Flexbox 以後，我們不再需讓區塊垂直對齊的那些 CSS tricks 了！而 Bootstrap 當然也從善如流，將此特性加入新的 Bootstrap 4 內。
垂直對齊
對 .row 或 .col 加入 .align-items-start align-items-center align-items-end ，就可以讓列或欄垂直的置頂、置中或置底。
例如列的垂直對齊：
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
與欄的垂直對齊：
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
水平對齊
對 .row 加入 .justify-content-start justify-content-center justify-content-end ，就可以讓列置左、水平置中或置右。而另外兩個新元素 justify-content-around 是讓該列內的欄平均的排列在該列當中，justify-content-between 則是讓列類的欄靠邊排列在該列當中。
例如：
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
而其他原本在 Bootstrap 3 當中使用的位移功能 ( offset ) 也還是存在著，但寫法已經從 .col-{breakpoint}-offset-* 改為 .offset-{breakpoint}-* ，並新增了Margin 通用類別 ( Margin utilities ) ml-auto mr-auto ，而他們也可以加上 RWD 中斷點指定變成 .ml-{breakpoint}-auto 或 .mr-{breakpoint}-auto 等。
位移功能 ( offset )：
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Margin 通用類別 ( Margin utilities )：
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
其他當然還有相當多關於網格系統 ( Grid System ) 的應用與變化，可參考關於 Grid 部分的官方文件。
新元素 “卡片” ( Cards )
Cards 是 Bootstrap 4 的全新組件，一樣使用了 Flexbox 建構，用來取代原本的.panel、.well 和 .thumbnail，並且多了瀑布流樣式 ( Masonry-like )可供使用。 卡片可支援各種內容，包括圖像、文字內容、清單、連結等。
文字內容：
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
圖片與描述：
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
另外也可在卡片內加上頁首 ( header ) 或頁腳 ( footer )：
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
而 Bootstrap 4 更加強化了一些色彩情境與邊框的通用類別，我們也可以將它套用在卡片上，讓卡片的背景與顏色更加活化。
變更背景與字色：
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
變更框線：
<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
瀑布流樣式 ( Masonry-like )： 將卡片包在 .card-columns 中，就會讓卡片呈現瀑布式排列。
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
也可以對欄位使用一些程式碼進行客製化，例如：
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}
像這樣就可以調整在不同裝置下生成的欄位數。
卡片的更多資訊可以在關於 Cards 部分的官方文件找到。
結尾
以上三個部分的介紹雖然只是冰山一角，但希望能讓大家對 Bootstrap 4 能夠產生想更進一步研究的興趣，當然更詳細的內容可以參考 Bootstrap 4 官方文件。
有任何錯誤或建議，也歡迎留言或來信告知唷！