Bootstrap – Utilities 通用類別 01

文章提要

Grid 網格

| Grid 額外練習 : 網格系統 |

CH6 33

課程練習下載 – Grid.html
Bootstrap 路徑 :　Lauout / Grid

Equal-width | row 與 col 使用 line 74 + 打開以下註解顯示新的項目 line 92

使用 Grid System 外層需用 row 內層需用 col
不設定 col-數值 的數值，讓它自動延伸
Grid System 是使用 Flex ，這邊 col 沒有加數字，它會等比例去區分空間。範例中空間為 100% ，三個 col 會自動分為三等份

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Equal-width multi-line | w-100 分欄使用

w-100 為 width : 100% ;
- Utilities / Sizing
原本四個一列變上下兩列，每列各兩欄

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div> <!--試試把此註解看變化-->
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Setting one column width | 把目標替換成 1~12 不等的數值 line 124

如果 "目標" 設定 6，剩餘兩個 col 會去平分剩餘空間 ( 寬度 )

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-目標">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variable width content | 把目標替換成 auto line 142

col-{breakpoint}-auto : 依內容寬度決定 Grid 寬度
- 內容寬度為 Variable width content
把範例目標改成 auto 試試

// 未加入 auto 示意圖 ▼
Bootstrap-column未加auto

// 加入 auto 示意圖 ▼
Bootstrap-column加auto

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-sm-目標">
      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-目標">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

All breakpoints | 把目標替換成相加總合為 12 line 171

除了不設定 col- 後方的數值讓它自動延伸外，也可設定加總為 12的數值。

<div class="container">
  <div class="row">
    <div class="col-目標">col</div>
    <div class="col-目標">col</div>
  </div>
</div>

| 把目標，替換成 md, sm 並調整視窗大小觀察變化 line 183 |

.col- 加入斷點 ( sm、md、lg、xl ) 變成響應式
col-sm-數值 → 576px 以上( 含 576 ) 呈現 8:4 兩欄格式，575px 以下( 含 575 ) 呈現兩列 width : 100%; ，以此類推
Bootstrap 斷點設定 Layout / Containers

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

| Grid 網格系統-垂直對齊 |

Bootstrap 路徑 : Grid / Vertical alignment

把目標，替換成 start, end , center 並調整視窗大小觀察變化 line 196

align-items 針對整體交錯軸的對齊

<div class="container bg-light">
<div class="row align-items-目標 h300">
<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>

把目標，替換成 start, end , center 並調整視窗大小觀察變化 line 214
- align-self 針對單一元素交錯軸的對齊
- Grid System 高度都會預設100%，所以這邊未設定目標值時，高度顯示是為 100% 。這邊目標填入start、center、end 高度就不會是 100% 而是依據內容調整高度

<div class="container bg-light">
  <div class="row h300">
    <div class="col align-self-目標">
      One of three columns
    </div>
    <div class="col align-self-目標">
      One of three columns
    </div>
    <div class="col align-self-目標">
      One of three columns
    </div>
  </div>
</div>

| Grid 網格系統-水平對齊 |

Bootstrap 路徑 : Grid / Horizontal alignment

把目標，替換成 start, end , center 並調整視窗大小觀察變化 line 234

<!--主軸對齊-->
<div class="container bg-light">
<div class="row justify-content-目標">
<div class="col-4">
  One of two columns
</div>
<div class="col-4">
  One of two columns
</div>
</div>
</div>

| Grid 網格系統-No gutters |

Bootstrap 路徑 : Grid / No gutters

把目標，替換成 no gutters 並調整視窗大小觀察變化 line 254

把 Grid System 中間預設的 gutter 拿掉

<div class="row 目標
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

| Grid 網格系統-order 排序 |

Bootstrap 路徑 : Grid / order

把目標，替換成 1~12 的數值或 first, last line 264
- 使用的是 flex 中 order 的屬性。
- 除了數字，也可套用 first , last，數值小的在前方

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-目標">
      Second, but last
    </div>
    <div class="col order-目標">
      Third, but first
    </div>
  </div>
</div>

| Grid 網格系統- Offsetting column 推移 |

Bootstrap 路徑 : Grid / Offsetting column

把目標，替換 offset (偏移) line 284
- offset-md-數值，後方數值為每個 column 的寬度， md 也可自行更換想要的斷點
- 加總不能超過 12
把目標，替換 ml-auto line 300
- 會將 flex 之中的元素被推移到另一個頂端
- .ml-auto , .mr-auto

//未加 margin 示意圖 ▼
Bootstrap-margin 示意圖01

//範例一示意圖 ▼
Bootstrap-margin 示意圖02

//範例二示意圖▼
Bootstrap-margin 示意圖03

<!--範例一  1會被推往右邊，2也連帶一起被推往右-->
<div class="container">
  <div class="row">
    <div class="col-md-4 ml-auto">1</div>
    <div class="col-md-4 ">2</div>
  </div>
</div>

<!--範例二 2 被推往右邊-->
<div class="container">
  <div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4 ml-auto">2</div>
  </div>
</div>

資料來源

六角學院 – 精通 Bootstrap 4 開發超強不解釋
六角中譯 Bootstrap 官網
Bootstrap 官方網站