# [Bootstrap] Grid system 配置版面

###### tags: `Bootstrap`
### 定義網格規則

- Bootstrap使用flexbox建立網格系統，符合響應式設計，並且能夠更方便的實現等高及對齊置中效果。

- 定義列與行的語法，先決定外層row列數，再設定內層的寬度col，寬度bootstrap定義分成12等分， `<div class="col-[裝置尺寸]-[寬度大小]">`

- 定義螢幕尺寸(xs, sm, md, lg)

- 定義寬度大小(1~12)，col-後面接的數字，就是在一行中，佔有幾個「1/12的空間」。例如：col-4就代表佔了4/12的寬度空間

- 範例：<div class="col-md-6> 在md的大小時會佔據6/12一半的寬度(深綠色)，程式碼如下:

<div class="row">
  <div class="col-md-12  text-center">12/12</div>
</div>
<div class="row">
  <div class="col-md-6  text-center">6/12</div>
  <div class="col-md-6  text-center">6/12</div>
</div>

網頁呈現圖

---

### 垂直對齊

* row可以在.row的 class 加上：
左->align-items-start
右->align-items-end
中->align-items-center

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>


* column可以在.col- 的 class 加上：
上->align-self-start
中->align-self-center
下->align-self-end

### 水平對齊

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

參考資料：https://cythilya.github.io/2017/04/04/flexbox-basics/

---

### 補充資料

- 在預設的情況下，每一個欄（column）之間都會有間隙（gutter），透過在 .row 上加上 .no-gutters 即可去除

- 我們可以在同一個 column 上給多的 class 來讓頁面在不同螢幕尺寸時有不同的排版：`<div class="col-sm-4 col-md-8"></div>`當螢幕尺寸為md以上時會以8/12顯示，sm則以4/12顯示