(5) Bootstrap 網格系統 (Grid)

Ivy Ho

Published in

IvyCodeFive

9 min readJun 5, 2020

在排版這個重要的章節，進入 Flex 主題之前，先來了解 Bootstrap 的網格系統吧!

此主題會分為以下 4 個部份做介紹

Bootstrap 網格系統基本觀念
Bootstrap網格系統+響應式中斷點的使用
BS4 與 BS3 網格系統最大差異 — 使用flex排版
Bootstrap 網格系統用法補充

Bootstrap 網格系統 (Grid) 基本觀念

首先先來看以下這張圖🕵️‍♀️

還不懂的話別急別急，這張圖下面還會出現唷~

Bootstrap 的網格系統簡單來說由以下三個項目組成

12個欄位 (column)
11個內部間隔 (gutter)
兩邊的外部間隔( gutter on outside)

Bootstrap 網格系統使用鐵則

容器與物件分離 :
外層設定一個 .row，內層再設定 .col-*，內容必須包在 .col-*裡面

假設我們今天要排一個像上面圖片中一樣的版型，我們希望左邊區塊是一個側邊選單 (sidebar)，佔整體版面 12 等分中的 4 等分 ; 右邊區塊佔 8 等分，是網頁內容 (content)，寫法就會像以下這樣 :

落實容器與物件分離，才能有效使用格線系統

⚠️在格線系統外層使用 .container 可避免頁面出現水平卷軸，並正常產生 gutter on outside，讓頁面排版更為穩定。

⚠️內容須寫在.col-*的內層

⚠️建議不要去設定.col-*這層容器的水平軸 padding 或 margin

gutter是如何產生的?

再來看一次文章最上方這張圖

圖片上半部為原理解析，下半部為網頁頁面上會呈現的排版畫面。

當我們使用格線系統來排版，.col-* 區塊的左右兩邊皆會產生 padding(圖片中藍色部分)，而當兩個 .col-*區塊碰在一起肩並肩，gutter就形成了 !

此時會想問，沒碰在一起的外部那兩個藍色 padding 上哪去了? 為什麼在網頁上顯示的畫面中，.col-* 區塊外層的寬度會是剛好貼齊 .row 的兩邊呢? 原因是因為 Bootstrap 在 .row的預設設定中，外部兩邊分別加上了負值的margin，將 .col-* 的最外側這兩邊的 padding 給補足(消除)了。

.row 的預設設定 :

 display: flex;
 flex-wrap: wrap;
 margin-right: -15px;
 margin-left: -15px;

.col-* 的預設設定 :

position: relative;
width: 100%;
padding-right: 15px; 
padding-left: 15px;

gutter on outside又是如何產生的?

上面有提到，在格線系統外層使用 .container 可避免頁面出現水平卷軸，並正常產生 gutter on outside (也就是圖片中外層橘色部分)，其產生的方式就是在bootstrap 的.container 預設設定中，左右各有 15px 的padding。

.container 的預設設定 :

.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px; //gutter on outside
  padding-left: 15px;  //gutter on outside
  width: 100%;
  max-width: 1140px;      // 寬度會隨螢幕尺寸變化
}

Bootstrap網格系統+響應式中斷點的使用

由於 Bootstrap 是設計來「行動優先」的框架，因此 grid 系統當然也能搭配響應式的中斷點來使用，製作出更具彈性的排版。

可搭配以下斷點使用 :

1. 不加斷點: <= 575px

預設值。如上面所說，Bootstrap是行動優先的框架，因此預設的寬度大小即為手機直放寬度。

2. sm : 575px~767px

手機橫放寬度。

3. md : 768~991px

平板尺寸

4. lg : 992px~1199px

桌機尺寸。

5. xl : >=1200px

將網格系統+響應式斷點的使用範例如下:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
</div>

以上程式碼呈現出的排版如下:

手機版

在手機版，因第一個區塊設定 .col-12，會呈現滿版寬度，第二個區塊因上面區塊滿版，會被推至下方，且設定了.col-6，因此會佔1/2螢幕寬。

平板、平板以上

螢幕寬度到了平板尺寸(md)以上，因為分別設定了.col-md-8 及 .col-md-4，因此會呈現以上排版畫面。

BS4 與 BS3 網格系統最大差異 — 使用flex排版

BS4 (Bootstrap4) 與 BS3 最大的差異在於，BS4 改用 flex 排版，也因為如此，Grid 排版還有以下用法 :

假如我們希望 .row 中要放3個等寬的 .col，我們可以使用以下寫法

<div class="container">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-4"></div>
        <div class="col-4"></div>
    </div>
</div>

而因為 BS4 的格線系統同時使用了 flex 排版的緣故，我們也可以使用以下寫法，也就是 .col 後面不加任何數字，來達到相同效果

<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

原因為何 ? 我們可以看看 BS4 中 .col 的預設設定:

flex-basis: 0;
flex-grow: 1;
max-width: 100%;

因為有 flex-grow: 1; 的緣故，每一個 .col 在版面中同樣都佔據1等分，因此寬度便會平均分配。

也可以將.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>

如此一來，.col-6 便會佔據 12 欄中的 6欄，剩下的寬度空間則會由兩邊的 .col 平均分配，排版畫面如下:

Bootstrap 網格系統用法補充

1. 使用 .w-100 使 .col 換行

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

以上程式碼中有四個 .col ，寬度會平均分配並且並排。

此時如果我們希望他可以呈現兩兩並排，分成上下 2 列，我們可以在希望斷行的位置加上 .w-100 ，便可使後面的內容移至下一行 :

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>