2017年6月10日 星期六

[學習筆記] Bootstrap4 Grid System


在 Bootstrap4 的 Layout 使用的是 CSS flexbox 來達到排版的效果,因此建議可以先瞭解 flexbox 屬性的,flex-containerflex-items 的意義,將能夠更快理解 Bootstrap4。
以下內容整理自 Bootstrap 官方網站 Grid System。羅列我認為幾個比較重要的概念,如果時間允許的話,建議還是閱讀官方文件。

基本使用

<!--  html  -->
.container>.row>.col-sm{lorem}*3
  • Container 提供基本的方式來置中你的內容,使用 .container 當你的容器寬度是固定的;如果想要滿版寬,則使用.container-fluid
  • Rows 是列的意思,用來包住裡面的 Columns 以確保每欄可以排列適當。
  • 內容則是放在 Columns 裡面,也就是 .row>.col-sm{內容} 這樣的結構
  • 一共可以設定 5 種不同的斷點(breakpoints)
Size BreakPoint Class Prefix
Extra small < 576px .col-
Small ≥ 576px .col-sm-
Medium ≥ 768px .col-md-
Large ≥ 992px .col-lg-
Extra large ≥ 1200px .col-xl-
grip options @ Bootstrap

隨著內容變動寬度

使用 col-{breakpoint}-auto 同時搭配上 horizontal alignment 可以讓 column 的寬度隨著內容而改變。

取消間距(gutters)

在預設的情況下,每一個欄(column)之間都會有間隙(gutter),透過在 .row 上加上 .no-gutters 可以去除:
  • 欄和欄之間的 padding,預設是padding: 0 15px
  • 每一 row 外圍包住的 margin, 預設是 margin: 0 -15px
<!--  html  -->
.container>.row.no-gutters>.col*3

在 row 中換行

當我們想要在 .row 裡面達到換行效果的時候,我們可以在一個空的 column 上使用 .w-100
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>

指定 column 的寬度

由於使用的是 flexbox 來排版的緣故,預設每個 cloumn (.col-<size>)就會是等寬的,但是如果你希望能夠自行設定可以使用 .col-<size>-<number>:
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

在不同螢幕尺寸上有不同寬度

我們可以在同一個 column 上給多的 class 來讓頁面在不同螢幕尺寸時有不同的排版:
<!-- 
  - 當螢幕尺寸為 md 以上時會有 8:4 來顯示 
  - 當螢幕尺寸為 sm 時會以 4:8 來顯示
  - 當螢幕尺寸小於 sm 時會換行顯示
-->
<div class="row">
  <div class="col-sm-4 col-md-8">.col-sm-4 .col-md-8</div>
  <div class="col-sm-8 col-md-4">.col-sm-8 .col-md-4</div>
</div>

使用 clearfix

我們可以在 row 裡面使用 .clearfix
<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix"></div>
  
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

給空的內容(offset, push)

如果在兩欄之中我們想要增加空欄,我們可以不必用空的 div ,而是使用 .offset-<size>-<number> 的 class 就能製造空欄的效果
<!--
  - sm 時會有兩個單位的空欄
  - md 以上時則不會有空欄
  -->
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

交換 item 的內容

使用 .push-md-*.pull-md-* 可以達到在特定螢幕尺寸下交會 items 的效果:
<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>

對齊(alignment)

垂直對齊

在 row 上

可以在 .row 的 class 加上:
  • align-items-start
  • align-items-center
  • align-items-end
<!--  html  -->
.container>.row.align-items-start>.col{one of three columns}*3

在 column 上

可以在 .col- 的 class 加上:
  • align-self-start
  • align-self-center
  • align-self-end
<!--  html  -->
.container>.row>.col.align-self-start+.col.align-self-center+.col.align-self-end
vertical alignment @ bootstrap

水平對齊(horizontal alignment)

可以在 .row 的 class 加上:
  • justify-content-start
  • justify-content-center
  • justify-content-end
  • justify-content-around
  • justify-content-between
<!--  html  -->
.container>.row.justify-content-start>.col*3

資料來源

Grid System @ Bootstrap
Share:

0 意見:

張貼留言