bootstrap v4 的介紹

Ｒef : http://muki.tw/tech/bootstrap4-grid-introduce/

垂直對齊

前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。

• align-items-start：置頂
• align-items-center：置中
• align-items-end：置底

▼ 直接在row裡面寫上align-items-*的 CLASS 即可。

Markup

<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：置底

Markup

<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。另外以置中為例，輸入多行文字後，他真的就是從中間平均的往上下展開唷！

水平對齊

有垂直對齊就一定會有水平對齊(廢話XD)，所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

• justify-content-start：靠左對齊
• justify-content-center：置中對齊
• justify-content-end：靠右對齊
• justify-content-around：分散對齊(含左右)
• justify-content-between：分散對齊(不含左右)

Markup

<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>

移除 gutter

Bootstrap 的row跟column分別有使用margin以及padding當作 gutter，讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求，我們希望 column 是緊密黏在一起的，所以 V4 新增了no-gutters這個 class，可以讓我們移除 gutter

Markup

<div class="row no-gutters">
  <div class="col">A</div>
  <div class="col">B</div>
</div>

直接將no-gutters放在row就可以囉，因為語法跟效果很直覺，所以就不上 codepen 範例惹

Column 排序

以前如果要將排序會用pull跟push在那邊推來推去的，現在一樣因為使用了 Flexbox 的關係，在使用上也更方便了！

• flex-unordered：不排序
• flex-first：第一個
• flex-last：最後一個

Markup

<div class="row">
  <div class="col flex-unordered">
    我應該是第一個，但我不排序
  </div>
  <div class="col flex-last">
    我應該是第二個，但我會排在最後
  </div>
  <div class="col flex-first">
    我應該是第三個，但我會排在最前面
  </div>
</div>  

這邊要特別注意的是，如果使用 flex 排序，寬度縮小時也會持續這個排序模式，column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%，還是可以使用 V3 的push以及pull，不過在 V4 的寫法有一點調整，將前綴位置放到後面(原本是col-md-push-*)：

Markup

<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也一樣將前綴往後放，但使用方法相同所以就不特別介紹了。