[基礎課程] Bootstrap5 教學（一）：安裝、排版、內容

發表於 更新於 分類於 , 閱讀次數 × 文章字數 × 12,502 所需閱讀時間 ≈ 00:22:44


本系列為 Bootstrap 版本號 v5.0 教學文章，在接觸 Bootstrap 之前需要擁有一定的 HTML5/CSS3 觀念，才能理解 Bootstrap 的原理應用以及調整技巧，如果你另具備了 JS/JQ 的開發能力，那更方便進一步的使用並控制這些 Bootstrap 套件工具。

筆者這裡 Boostrap 的系列文章都來自官方本身提供的 Document 教學資料重新進行重新解析與翻譯重組解釋（也包含閹割一些覺得非必要的資訊），如果你擁有足夠的能力可直接閱讀官方手冊並動手實作就不需要特地參閱本篇教學，試著動手跟著官方文件做操作練習才是最佳的經驗累積。

本篇一開始會介紹 install 基本安裝環境，接著先介紹核心的 layout 版面排版技巧（將牽扯到 Bootstrap 自家的 Grid 觀念 與 CSS Flex 技術），最後為 Content 內容項目為 HTML 之基礎效果。

介紹

BootStrap 原來自於 Twitter 公司內部的前端視覺框架工具，將常用的 CSS 與樣式打包起來共享到 github 因此大受歡迎成為主流 UI 而獨立出來的免費 CSS 套件。他有良好的 RWD（無障礙跨平台）以及多項主流的 UI 設計規劃，使用 BS 的好處就是你不用再自行設計。開發前端視覺可以更加便捷有效率。（從這裡開始都稱呼 BS 為 Bootstrap 的簡寫）

BS 目前時間線上 (2021Q1) 筆者手上的最新版本為 5.0，主要包含以下重點：

  1. 第四版開始以 flex 彈性盒觀念進行開發，內容都有水平與垂直的對齊與排序概念。
  2. 學會 BS 之前必須要先熟悉各種 CSS 屬性，BS 大多數的 class 命名都由 css 屬性組合出效果。
  3. 使用網格概念 12 格進行版面分配，以及搭配 Media Query 分為四種寬度區域，完成可視性上的格局變化 (RWD 也就是響應式網站）。
  4. 除了 class 命名公式，BS 也使用 HTML5 的自訂屬性標籤，通常都使用 data-*進行相關的 JS 觸發操作。
  5. 第五版開始移除 JQ 所有依賴性與自身提供 SVG 的 icon，同時也不支援 IE 瀏覽器使用
  6. 具備 SASS 與 Webpack 觀念者，額外提供自定義技巧進行專案開發應用教學指引使用。（非本系列基本教學範圍）

在正式學習 BS 之前會建議以下學習方式：

  • 直接參考官網文件會有完整的說明，本文章僅補助快速學習步調或記憶加強，僅適時的補充說明。
  • BS 是大量的 CSS 屬性所編製而成的公式 (Class 名稱），嘗試去看已處理過的 css 代碼，能幫助你加強複習 CSS 屬性。反之熟悉 SASS 者可閱讀原 SASS 代碼。
  • 多嘗試練習所有元件與功能並理解各屬性效果，未來設計網頁過程中，能直覺想到 BS 有提供那些元件能用。
  • 由於 BS 一些效果是透過 SASS 所產生出來的，除非你是屬專案自訂開發者需要修改 BS 預設值，否則有提到 SASS 部分可忽略不需理解。

原學習文件請參考官方網站或中文化網站對比學習，本篇開始根據 v5.0 進行介紹：

安裝（初始化）

安裝管道的方式很多（譬如 CDN、npm、webpack 等等），採用最基本的下載方式，內容物將包含很多分支版本，可參考對於這些 CSS 比較差異 分別代表那些用途。

所需的初始環境只有 BS 下載包內的完整 css（初心者建議非 min 版本使用，試著理解 CSS 內容物）與綑綁版本 js（為完整使用所有元件必需含有 popper.js) 共兩筆檔案，以及如果你不想去修改影響 BS 的 css，你應該額外寫在 css 樣式並利用優先權方式去搶奪 CSS 效果，所以整個檔案初始結構為：

plugins/
├── bootstrap.css
    // 包含 BS 各種 Class 樣式表，由於我們需要反向理解樣式表加深印象，建議使用非壓縮版本。（實際工作上若不會修改你應該使用 min 版）
├── custom.css
    //你應該把自訂的 CSS 寫在這裡而不是去調整 BS 的 CSS
├── bootstrap.bundle.min.js
    //主要包含 bootstrap.js + Popper.js，我們不會去研究理解 JS 所以使用壓縮板即可。

測試

接著參考 BS 的 元件 - 導覽列 (Navbar) 之第一組範例，試著貼上代碼能否出現一樣的畫面，並試著檢查畫面、互動、響應式是否皆正常顯示：

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="plugins/bootstrap.css"> <!--宣告 CSS-->
  <script src="plugins/bootstrap.bundle.min.js"></script> <!--宣告 JS-->
</head>
<body>
  <!--貼上測試範例 start-->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
  <!--貼上測試範例 end-->
</body>
</html>

預覽如果得到如下圖則代表 BS 運作正常發揮，請注意每次要使用 BS 你都必須要宣告好以上這些 CSS/JS 套件引用。
預覽畫面

排版 Layout

BS 很核心重要的排版觀念，包含了響應式的斷點處理、寬窄版的容器區塊、空間 12 格的網格分配與間格、水平垂直的 Flex 對齊方式與內外間距的通用排版。

響應式斷點 Breakpoints

所謂的響應式設計係為了配合不同的裝置瀏覽器寬度做最佳體驗。由設計師進行考量將相同的內容有多種排版呈現，使得不論何種瀏覽裝置都只網站只有一個（集中網站流量與維護）。

響應式原理根據 Media Queries 來計算瀏覽器可符合最小寬度條件進行不同的屬性輸出，統合出公式化的六個等級去控制這些 viewpoint 寬度做不同的樣式。

https://getbootstrap.com/docs/5.0/layout/breakpoints/#min-width
// 1. Extra small devices （直立手機用途，小於 576px)
/*none @media queries :: 沒有 Media Query 規則是因為 BS 以 100%為低標 */

// 2. Small devices （橫式手機用途，包含 576px and up)
@media (min-width: 576px) { ... }

// 3. Medium devices （平板用途，768px and up)
@media (min-width: 768px) { ... }

// 4. Large devices （電腦用途，992px and up)
@media (min-width: 992px) { ... }

// 5. Extra large devices （寬螢幕電腦，1200px and up)
@media (min-width: 1200px) { ... }

// 6. XX-Large devices （超寬比螢幕，1400px and up)
@media (min-width: 1400px) { ... }

只有 table 與 modal 的響應斷點是採用 max-width 方式來設計，其各數據相較於前者 min-width 減少 0.2px。不論何種，只需知道公式 xs, sm, md, lg, xl, xxl 六種模式可操作使用即可。

響應斷點是一種可彈性的額外效果，在各種元件或功能內所提供（但並不是每個元件都有）。在下一個 container 設計將舉例如何搭配斷點做出響應變化。

容器 Containers

容器是最基本的布局外框元素，使用 grid 系統時一定要搭配使用。同時容器也能讓我們選擇如何在螢幕上呈現寬版（填滿）或窄版（侷限範圍）設計。大多數的設計師不太喜歡寬版（因為眼球移動範圍太大，除非是廣告圖性質），以及當你多組容器進行縱向組合時所帶來的視覺感。同時如果因應裝置不同時顯示方式。

最外層的主容器應用如前面練習的範例顯示，由於沒有指定容器時因此該區塊總元素繼承了 body 空間達到 100%，此時若添加容器 container 便能使該區塊總元素不是塞滿方式。

class 公式 說明
container 窄版（本身響應式，不同的螢幕寬會有各自數據的窄方式）
container-fluid 滿版（雖填滿，但本身兩側提供保留 padding 預設值 0.75rem ）

延續前面練習 code 試著對行數 2 調整 div.container-fluid 改為 div.container 或移除看看，同時可以試著去縮短瀏覽器寬度看看效果。

index.html
<!--貼上測試範例 start-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<!--貼上測試範例 end-->

小技巧
容器本身主要作用是限制你的內容總寬度，如果此容器外有背景色需填滿。則應由外層來扮演此背景色屬性。

從下列的 BS 樣式表得知 container 根據不同的螢幕寬度去指定最大寬度上限使得容器不會特別滿版。然而 container-fluid 除了寬 100% 與 padding 效果並沒有 media queries 設計。

bootstrap.css（官方樣式）
.container,
.container-fluid {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

響應斷點 breakpoints

除了 container與container-fluid，另提供 container-{breakpoint} 的響應斷點公式，能使原先 container 效果差異能延遲於不同裝置上。

class name Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XX-Large
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-fluid 100% 100% 100% 100% 100% 100%
https://getbootstrap.com/docs/5.0/layout/containers/#responsive-containers
<style>
  div {
    background: #ccc;
    border: 2px solid #aaa;
    margin-bottom: 5px;
  }
</style>
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

網格 Grid

網格是重要的欄位排版系統，能有效的去規劃多欄位如何進行區塊的行列並排方式。Grid 原理採用 flex 所規劃，若熟悉 flex 概念就能理解對齊方式，以及 12 欄空間法根據 flex-basis:auto 與 width 百分比為分配操作。

參考範例（等寬）局部調整，並請試著調整瀏覽寬度檢查，有以下論點：

  1. 因為 container 關係，為呈現窄版 (media queries) 並保持水平置中 (margin auto)，同時左右兩側為 gutter 網格間距 (padding 0.75rem)。
  2. row 與 col 代表行列理念，範例中分別呈現出 1 行 2 列與 1 行 3 列。
  3. row 會反噬外距設計 (margin -0.75rem) 剛好與 container 的間距相消，cow 有自己的 gutter 網格間距 (padding 0.75rem)。
  4. .container>.row>.col 的層級結構下，會使多欄位的網格間距能切齊未包含 grid 的普通 container。換言之這三層元素名稱在使用 grid 時不可省略。
  5. .row 為 flex 設計，因此可輕易添加 flex 屬性進行調整 col 的排列方式。
  6. 無關鍵數字的 .col 因屬性 flex:1 0 0% 持有膨脹係數會均分填滿而等寬。
  7. 在一個 row 內，可使用 .col-{1~12} 指定欄位的固定寬（總和為 12 之分配比例），亦可混搭 .col 來填滿剩餘空間。
  8. 同上，使用 .col-auto 其屬性為 flex: 0 0 auto 無膨脹係數，因此採用內容寬為版面寬度。
https://bootstrap5.hexschool.com/docs/5.0/layout/grid/#equal-width
<style>
  .row>div,
  .check {
    background: #ccc;
    border: 2px solid #aaa;
    margin-bottom: 5px;
  }
</style>
<div class="container check">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi qui consectetur nobis
  architecto dolorum reiciendis consequatur impedit, odio necessitatibus fuga delectus est eum tenetur voluptatem
  minima, quas quia quibusdam earum.</div>
<div class="container">
  <div class="row">
    <div class="col">
      col
    </div>
    <div class="col">
      col
    </div>
  </div>
  <div class="row">
    <div class="col">
      col
    </div>
    <div class="col">
      col
    </div>
    <div class="col">
      col
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col">
      col
    </div>
    <div class="col-9">
      col-9
    </div>
    <div class="col">
      col
    </div>
  </div>
  <div class="row">
    <div class="col">
      col
    </div>
    <div class="col-5">
      col-5
    </div>
    <div class="col-5">
      col-5
    </div>
  </div>
  <div class="row">
    <div class="col">
      col
    </div>
    <div class="col-5">
      col-5
    </div>
    <div class="col-auto">
      col-auto
    </div>
  </div>
</div>

網格參數 Grid options

一個容器透過網格切成 12 個空間單位去分配，每個 col 可指定給予多少水平空間分配。亦可指定在何種響應下改為使用多少空間。以下為 BS 官方參數說明：

xs
<576px		 sm
≥576px		 md
≥768px		 lg
≥992px		 xl
≥1200px		 xxl
≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes

值得注意的部分：

  1. 總寬空間會 12 份，因此 col-{number} 的 number 總和應為 12，例如 12, 6+6, 3+3+3+3, 3+3+6, 4+4+4, 2+2+2+2+2+2+2……
  2. 如果 col 沒有指定數字（空間），全 12 空間優先有指定數字的 .col-* 分配扣除，剩餘空間再平均給未指定數字的 .col 做膨脹係數。
  3. 如果總和硬要超過 12，會發生擠壓而自動到下一行繼續輸出。
  4. 如果想強迫下一行排列，可使用 div.w-100 達到類似 <br> 的搶奪空間效果（因無內容而看不到），但實際上建議以第二組 row 設計排列。
  5. 如想以內容為寬，可使用 div.col-auto 將直接以 content 為寬而不是 flex item 之 width 分配值。
<style>
  .row>div{
    background: #ccc;
  }
  .row {
    margin-bottom: 5px;
    outline: 1px solid blueviolet;
  }
</style>
<div class="container">
  <!-- 總寬空間總和為 12，舉例可以 12,6+6, 3+3+3+3, 3+3+6, 4+4+4, 2+2+2+2+2+2+2...... -->
  <div class="row">
    <div class="col-6">col-6</div>
  </div>
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
  </div>
  <!-- 如果該 col 沒有指定數字（空間），全 12 空間會優先有指定空間的 col 分配，剩餘的空間再平均給未指定數字的 col。 -->
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col">col</div>
    <div class="col-4">col-4</div>
  </div>
  <!-- 如想以內容為寬，可以使用`<div class="col-auto">`，將只根據 content 為寬做保留，不是以網格單位。 -->
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col-auto">i am content!</div>
    <div class="col-6">col-6</div>
    <div class="col">col</div>
  </div>
</div>

響應斷點 breakpoints

除了基本語法 col 與 col-* 使用，也有響應的語法分為 col-{breakpoint} 與 col-{breakpoint}-* 兩種且可混合使用。

  1. 如果該 box 某響應狀況下內沒有宣告col就會脫離 grid 單元，而是滿 100%的 box 單元。（除非有需求，否則應避免此狀況）
  2. 因為自動分配關係，不帶數字的col-{breakpoint}可以寫成col來看待（因為不論何種響應規則下都是最後重新分配寬）
  3. 響應斷點本身有向上相容（優先權）的效果，所以col-*<col-sm-*<col-md-*<col-lg-*<col-xl-*
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }
</style>
<div class="container">
  <div class="row">
    <!-- col 能決定何時才會變成 full width -->
    <div>this is a normal div, always=100%</div>
    <div>this is a col-12, always=100%</div>
    <div class="col-xxl">col-xxl, when &lt;1400 = 100%</div>
    <div class="col-xl">col-xl, when &lt;1200 = 100%</div>
    <div class="col-lg">col-lg, when &lt;992 = 100%</div>
    <div class="col-md">col-md, when &lt;768 = 100%</div>
    <div class="col-sm">col-sm, when &lt;576 = 100%</div>
    <div class="col">col, width = auto</div>
  </div>
  <div class="row">
    <!-- 不帶數字的 `col-{breakpoint}` 可視同當下 media queries 狀態為 col 而自動分配寬度 -->
    <div class="col">col</div>
    <div class="col-sm">col-sm</div>
    <div class="col-md">col-md</div>
  </div>
  <div class="row">
    <!-- 如果某 media queries 當下找不到 col 公式會導致 100% 滿版（除非有需求否則應避免） -->
    <div class="col-xl-6">col-xl-6</div>
    <div class="col-xl-3">col-xl-3</div>
  </div>
  <div class="row">
    <div class="col col-xl-4">col<br>col-xl-4</div>
    <div class="col-xl-4">col-xl-4</div>
    <div class="col col-xl-4">col<br>col-xl-4</div>
  </div>
  <div class="row">
    <!-- 透過公式的混和與各自 media queries 的 width 值不同，形成響應式的多欄位控制 -->
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">col-12<br>col-sm-6<br>col-md-4<br>col-lg-3<br>col-xl-2</div>
  </div>
  <div class="row">
    <!-- 響應斷點本身有向上相容（優先權）的效果，所以相同數字可省略  -->
    <div class="col-sm-4">col-sm-4</div>
    <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">col-sm-4<br>col-md-4<br>col-lg-4<br>col-xl-4</div>
    <div class="col-sm-4 col-md-4 col-lg-4 col-xl-6">col-sm-4<br>col-md-4<br>col-lg-4<br>col-xl-6</div>
  </div>
</div>

行列指定 Row columns

於 row 元素添加 .row-cols-* 能額外指定單行內的欄元素筆數，控制一個 row 需多少 col 來排滿，其原理為指定經計算後之 width 值，適合搭配自動均分（無數字）的 .col 使用。另還有 .row-cols-auto 能指定 row 內的 col 全都是採用內容寬計算。

<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }
</style>
<div class="container">
  <!-- 預設 col 是吃剩下的空間再均分 -->
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col">col</div>
  </div>
  <!-- row-cols-5 導致 col 有 width:20% ( 等於 12/5 格數） -->
  <div class="row row-cols-5">
    <div class="col-6">col-6</div>
    <div class="col">col with<br>row-cols-5</div>
  </div>
  <div class="row row-cols-auto">
    <!-- row-cols-auto 導致 col 全都是內容寬設定 -->
    <div class="col-6">col-6</div>
    <div class="col">col with<br>row-cols-auto</div>
  </div>
</div>

響應斷點 breakpoints

Rowcolumns 提供了 row-cols-{breakpoint}-* 能在指定的響應下做處理。這能取代過去瑣碎的個別 col 做斷點處理。

<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }
  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }
</style>
<div class="container">
  <!-- 以前的做法，在各顯示尺寸下做不同的排列 -->
  <div class="row">
    <div class="col-sm-6 col-md-4 col-xl-3">col</div>
  </div>
  <div class="row row-cols-sm-2 row-cols-md-3 row-cols-xl-4">
    <div class="col-sm">col</div>
  </div>
</div>

巢狀結構

是指能在原本的 row 與 col 結構下，次規劃出 row 與 col（實用性不高），同時由父層空間分配下來繼承次分配。舉例如下：

https://getbootstrap.com/docs/5.0/layout/grid/#nesting
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

欄位 Columns

熟悉一定的 Grid 之後，接著學習控制 columns 相關調整技巧。這包含了對齊方式、換斷行欄位排列、欄位排序與偏移。

對齊 Alignment

row 本身就是一個 display: flex 父容器以及 col 為子項目。因此有些 class 參數與 flexbox 相同無差別。如果你已很熟 flexbox 彈性盒就可採同概念能對應到本操作，只是差別於直接以 className 來添加 flex 屬性。

請參考 官方示範，這裡不再舉例。

for row use

BS’s ClassName CSS’s flexbox 說明
.align-items-start align-items:flex-start 整體垂直之靠上為對齊
.align-items-center align-items:center 整體垂直之靠中為對齊
.align-items-end align-items:flex-end 整體垂直之靠下為對齊
.justify-content-start justify-content:flex-start 整體水平之靠左為對齊
.justify-content-center justify-content:center 整體水平之靠中為對齊
.justify-content-end justify-content:flex-end 整體水平之靠右為對齊
.justify-content-around justify-content:space-around 整體水平均分對齊，兩側留間格
.justify-content-between justify-content:space-between 整體水平均分對齊，兩側為子項目
.justify-content-evenly justify-content:space-evenly 整體水平均分對齊，所有間格一致寬

for col use

BS’s ClassName CSS’s flexbox 說明
.align-self-start align-self:flex-start 自我垂直之起始為對齊
.align-self-center align-self:center 自我垂直之起始為對齊
.align-self-end align-self:flex-end 自我垂直之起始為對齊
.order-* order:* 依據數字由小排序位置，可以是-1 或 13
.order-first order:first 更改位置為起頭
.order-end order:end 更改位置為最後

所以你可以輕易控制出以下行為：

  1. 設定水平對齊：利用 .justify-content-* 控制水平線
  2. 設定垂直對齊：利用 .align-items-* 控制垂直線

這裡只用到一部分的 flex 拿來對齊用途，flexbox 另有完整規格可供使用，後續的通用操作會再重新介紹。

換行與斷行

為如何將多欄位進行分配兩行排列的特別做法與現象。

  • 換行：任何超過 12 之欄位計算將自動進行 wrap 效果。
  • 斷行：其故意產生 width:100%的空白區塊使得欄位計算無法順利滿足 12 欄位計算。
<style>
  .row>div:not(.w-100) {
    background: #ccc;
  }
  .row {
    margin-bottom: 5px;
    outline: 1px solid blueviolet;
  }
  .w-100{
    border-bottom:1px solid red;
  }
</style>
<div class="container">
  <!-- 如果總和硬要超過 12，會擠壓到下一行繼續輸出。呈現出欄位的換行效果（下個單元介紹提到） -->
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
  </div>
  <!-- 如果想強迫換行可用`div.w-100` 產生類似 `<br>` 效果，原理只是塞滿版但看不到的 box （下個單元介紹提到）-->
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
  <!-- 可透過 display 通用操作控制該空白區塊的運作條件 -->
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

排序 Order classes

使用 .col.order-* 來控制欄位的出場順序，亦透過 flex 的機制運作，且只能編寫於子項目上使用。

for col use

BS’s ClassName CSS’s flexbox 說明
.order-* order:* 依據數字由小排序位置，可以是-1 或 13
.order-first order:first 更改位置為起頭
.order-end order:end 更改位置為最後

偏移 Offsetting columns

欄位的偏移提供了 .offset-* 的方式與透過 Margin 通用操作共兩種來達到變化性。前者將 grid 的欄位調整推移，後者為快速定位。

offset 推移

使用 offset-* 或 offset-{breakpoint}-* 來推移 col 的定位處（建議優先考量）。類似有個假想的不存在 col 幫忙吃掉該分配位置。

https://getbootstrap.com/docs/5.0/layout/columns/#offset-classes
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }
</style>
<div class="container">
  <h1>OFFSET</h1>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>
Margin 通用操作

利用 margin 去微調 col 位置，可參閱官方介紹的 utilities > Spacing 單元說明之 margin 參數來設定。此外另提供快速推底效果

  • .ms-auto 提供 margin-left:auto，效果為於 start 位置大量留白推頂。
  • .me-auto 提供 margin-right:auto，效果為於 end 位置大量留白推底。
https://getbootstrap.com/docs/5.0/layout/columns/#margin-utilities
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4<br>.ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3<br>.ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto<br>.me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

獨立欄位 standalone column

在第五版開始 column 的原理改採用 flex:0 0 auto 並改以 width 指定比例做為核心之空間計算。因此在沒有 row 的容器規劃下，仍可保持 width 的基本效果 (block 型態）。換言之能在一般的結構下亦可快速指定區塊的總寬之比例，舉例文繞圖的使用方式如下：

https://getbootstrap.com/docs/5.0/layout/columns/#standalone-column-classes
<style>
  .container div {
    background: #ccc;
    border: 1px solid black;
  }
</style>
<div class="container">
  <h1>standalone column</h1>
  <div class="col-3">
    .col-3: width of 25%
  </div>
  <div class="col-sm-9">
    .col-sm-9: width of 75% above sm breakpoint
  </div>
  <hr>
  <h1>float img and width 50%</h1>
  <div class="clearfix p-3">
    <img src="https://fakeimg.pl/1000x500/eee" class="col-md-6 float-md-end mb-3 ms-md-3 img-fluid">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nemo, velit molestiae aperiam laborum possimus
      illum animi consequuntur optio earum, assumenda vero consectetur alias corrupti dolore quasi fugiat, quas nihil.
    </p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nemo, velit molestiae aperiam laborum possimus
      illum animi consequuntur optio earum, assumenda vero consectetur alias corrupti dolore quasi fugiat, quas nihil.
    </p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nemo, velit molestiae aperiam laborum possimus
      illum animi consequuntur optio earum, assumenda vero consectetur alias corrupti dolore quasi fugiat, quas nihil.
    </p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nemo, velit molestiae aperiam laborum possimus
      illum animi consequuntur optio earum, assumenda vero consectetur alias corrupti dolore quasi fugiat, quas nihil.
    </p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nemo, velit molestiae aperiam laborum possimus
      illum animi consequuntur optio earum, assumenda vero consectetur alias corrupti dolore quasi fugiat, quas nihil.
    </p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nemo, velit molestiae aperiam laborum possimus
      illum animi consequuntur optio earum, assumenda vero consectetur alias corrupti dolore quasi fugiat, quas nihil.
    </p>
  </div>
</div>

注意：
使用浮動元素建議外層多增加並使用 .clearfix 來包覆，避免發生浮動錯位可能。

間格 Gutters

學習前面 Grid 已知道會在 .container 產生的padding:0 0.75rem , .row 產生的 margin: 0 -0.75rem ，以及 col-* 產生的 padding: 0 0.75rem，三者之前兩項會互相抵消使得 col 能對其整個 container 兩側，如此欄位之間的間格稱呼為 Gutters。

水平間格

預設左右各為 0.75rem（左右 12px)，如果需要加大或調整水平之間的 Gutters，你需要：

  1. 將 .container 的 padding 加大，利用 px-* 之通用操作達到。
  2. 將 .row 的 margin 負值 加大與前項目同值，利用專用公式 gx-* 達到，數字 0~5 且與前者數據不同因此需多嘗試媒合度。
  3. 讓 .col 的預設 padding 效果不變（與其他未影響的 container 仍切齊）。
  4. 若欄位內距仍想加大，你需要的是額外添加子元素進行 padding 調整。

另一做法可將步驟 1 更改為 .overflow-hidden 亦可調整，其效果差異於間格的兩側與欄位之間有所不同。

https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }
  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }
  .col>div{
    background: salmon;
  }
</style>
<h1>Container + px-4</h1>
<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>
<hr>
<h1>Container + overflow hidden</h1>
<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

垂直間格

與前面原理相同，其方向為縱向。且調整重點於 .row 使用 .gy-* 進行調整，數字 0~5。

https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }

  .row>div>div {
    background: salmon;
  }
</style>
<h1>Container + overflow hidden</h1>
<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

水平垂直間格

或者兩者一同調整 Gutter 空間，同樣在 .row 處規劃 .g-* 間格公式。

https://bootstrap5.hexschool.com/docs/5.0/layout/gutters/#horizontal--vertical-gutters
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }

  .row>div>div {
    background: salmon;
  }
</style>
<div class="container">
  <h1>Container + overflow hidden</h1>
</div>
<div class="container overflow-hidden">
  <div class="row g-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

行列指定的響應組合

Gutter 間格的調整參數也提供響應公式，下列範例說明如何搭配了行列指定的響應追加間格調整。

https://getbootstrap.com/docs/5.0/layout/gutters/#row-columns-gutters
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }

  .row>div>div {
    background: salmon;
  }
</style>
<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
  </div>
</div>

無間格 No gutter

預設情況下會有 container 的 padding 12px 與 row 的 margin -12px。你可以選擇該結構取消間格效果，在 .row 上添加 .g-0 即能清除間格。

https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters
<style>
  .row>div {
    background: #ccc;
    border: 1px solid black;
  }

  .row {
    margin-bottom: 20px;
    outline: 1px solid blueviolet;
  }
</style>

<div class="container">
  <h1>DEFAULT GUTTER</h1>
  <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>
</div>
<div class="container">
  <h1>NO GUTTER</h1>
  <div class="row g-0">
    <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>
</div>

排版類的通用操作 (display & flexbox)

在排版單元可以先學會部分重要的通用操作，包含 display, flexbox, Margin, Padding, visibility 為主要基本 CSS。這些都跟版面調整有很大基礎關係 （官網把這些單元說明大分類在通用類別，但唯獨這幾個提前講到作為版面所需認知）。

Display 操作

同等控制 CSS 的 display 屬性，參考 官網範例，並支援響應式中斷的 display，通常是以下寫法：

/* display */
.d-inline
.d-block
.d-flex
... 剩下省略

/* 規則公式： */
.d-{value} //for 響應式中斷 xs
.d-{breakpoint}-{value} //for 響應式中斷 sm, md, lg, xl, xxl

breakpoint: sm, md, lg, xl, xxl
value: none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex

透過響應式斷點能控制元素在指定的裝置上做顯示隱藏

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

列印模式的 Display

BS 設計了針對列印模式 ＠media print{} 規劃了相關 display 公式，更有效率設計列印狀態之顯示配合。

/* 規則公式： */
.d-print-{value}

value: none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

Flex 操作

由於 Grid 網格系統採用 flex 原理設計，因此可自行規劃 flex 規則機制。注意的是，如果不是應用在 .row 的元素，你需先持有 display 單元設定 display 為 flex 或 inline-flex ，接著才開始對 flexbox 做相關操作（反之本就在 .row 就不需設定 display 即可使用）。

/* use display than flex or inline-flex */
.d-flex
.d-inline-flex

/* 響應規則公式： */
.flex-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: flex, inline-flex

flex-direction 主軸方向性 (in 父容器）

flex-direction 控制容器的排列方向性，可控制水平左起、水平右起、垂直上起、垂直下起等主要方向。支援響應式中斷 breakpoint 應用。

/* flex-direction */
.flex-row  /*水平&左起*/
.flex-row-reverse  /*水平&右起*/
.flex-column  /*垂直&上起*/
.flex-column-reverse  /*垂直&下起*/

/* 響應規則公式： */
.flex-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: row, row-reverse, column, column-reverse

justify-content 屬性 (in 父容器）

justify-content 控制這些子項目的靠齊方式，可控制向左靠齊（根據 flex-direction 起始處）、向右靠齊（反之結尾處）、置中對齊、分散兩側、平均分散（每個子項目兩側都等寬）

/* justify-content */
.justify-content-start  /*向左（或起始處）靠齊*/
.justify-content-end  /*向右（或起始處）靠齊*/
.justify-content-center  /*置中對齊*/
.justify-content-between  /*均分對齊，兩端無間格*/
.justify-content-around  /*均分對齊，兩端為間格（等寬不重疊）*/
.justify-content-evenly  /*均分對齊，兩側為間格（等寬重疊）*/

/* 響應規則公式： */
.flex-content-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: start, end, center, between, around, evenly

align-items 屬性 (in 父容器）

align-items 控制子項目的 cross 縱向交叉軸，與 flex-direction 有同樣觀念但形成交錯之直角方向性。

/* align-items */
.align-items-start  /*頂端對齊*/
.align-items-end  /*底部對齊*/
.align-items-center  /*中線對齊*/
.align-items-baseline  /*基準線（內容之文字）對齊*/
.align-items-stretch  /*填滿 100%*/

/* 響應規則公式： */
.align-items-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: start, end, center, baseline, stretch

align-self 屬性 (in 子項目）

align-slef 能擺脫 align-items 的控制之優先權，獨立對本身子項目進行（與 align-items 一致的）控制效果。

/* align-self */
.align-self-start  /*頂端對齊*/
.align-self-end  /*底部對齊*/
.align-self-center  /*中線對齊*/
.align-self-baseline  /*基準線（內容之文字）對齊*/
.align-self-stretch  /*填滿 100%*/

/* 響應規則公式： */
.align-self-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: start, end, center, baseline, stretch

flex-fill 屬性 (in 子項目）

原 CSS 無此 flex 屬性，是 Bootstrap 使用 flex: 1 1 auto 作為套用。其目的控制子項目能均勻填滿整體主軸空間分配（寬度）。換個說法是，先分配好空間產生的空白間格在由子項目填滿。

/* flex-fill */
.flex-fill  /*子項目進行填滿間格*/

/* 響應規則公式： */
.flex-{breakpoint}-fill
breakpoint: sm, md, lg, xl, xxl

flex-grow 與 flex-shrink 屬性 (in 子項目）

與 CSS 的 flexbox 觀念中的 flex-grow 與 flex-shrink 雷同主要是控制子項目的膨脹收縮。但已被寫死分配比例只有數據 0 與 1。

  • 1 代表啟用膨脹/收縮，反之 0 代表強制不要膨脹收縮。
  • flex-grow-1 代表膨脹吃光所有空間並填滿。
  • flex-shrink-1 代表收縮到允許文字強迫換行的最小內容寬度，舉例若上層元素為 w-100 狀態時，該項目的擠壓效果會明顯化。（此屬性不常被使用，因子項目在不指定空間情況下就會自因內容調整寬度，少部分有需特地前者擠壓滿版並要求後者文字換行之可能性）
/* flex-grow */
.flex-grow-0  /*子項目不允許膨脹*/
.flex-grow-1  /*子項目允許膨脹填滿最大空間*/

/* 響應規則公式： */
.flex-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: grow-0, grow-1

/* flex-shrink */
.flex-shrink-0  /*子項目不允許收縮換行*/
.flex-shrink-1  /*子項目允許被擠壓時文字行收縮換行*/

/* 響應規則公式： */
.flex-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: shrink-0, shrink-1

margin auto 效果 (in 子項目）

之前曾在 row col 的部分曾介紹到 margin auto 效果，在 flexbox 內你可以使用.me-auto, .ms-auto, .mt-auto, .mb-auto，依據來推擠子項目呈現出最大間格。

wrap 屬性 (in 父容器）

當子項目受擠壓至上限時，內容文字是否允許換行之方式，分為不換行與換行朝上或換行朝下。

/* wrap */
.flex-nowrap  /*不換行*/
.flex-wrap  /*換行朝下*/
.flex-wrap-reverse  /*換行朝上*/

/* 響應規則公式： */
.flex-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: nowrap, wrap, wrap-reverse

order 屬性 (in 子項目）

之前介紹 row col 時曾討論過，這裡是用於控制該子項目在所有子項目當中的優先順序。

  • 從 0 開始優先，其次不指定者則次依 HTML 順序出現，最後從數字 1 開始小排序到大，最多數字為 5。
  • 提供絕對至首與至尾的 .order-first 與 .order-last 效果，原理為數字 -1 與 6。
/* order */
.order-{value}

/* 響應規則公式： */
.order-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: 0, 1, 2, 3, 4, 5, first, last

align-content 屬性 (in 父容器）

以水平主軸為例，在有高度的情況下控制子項目的垂直對齊方式，且必須多行模式下有效（也就是不支援於.wrap-nowrap模式下，但此時可改用 align-items 來控制達到相容效果）。

/* align-content */
.align-content-start  /*頂端對齊*/
.align-content-end  /*底部對齊*/
.align-content-center  /*中線對齊*/
.align-content-around  /*均分對齊，兩側留間格*/
.align-content-stretch /*平均的填滿空間*/

/* 響應規則公式： */
.align-content-{breakpoint}-{value}
breakpoint: sm, md, lg, xl, xxl
value: start, end, center, around, stretch

Spacing 操作

算很重要的微調處理，這裡討論的是 margin 與 padding 內外距的調整，這裡的公式參數會比較組合多一些。主要都是控制類型是內距 p 還是外距 m、方向上下左右、距離要多長（單位差為 0.25rem)

.{value}{sides}-{size} /* 間距控制 */
.{value}{sides}-{breakpoint}-{size} /* 響應式間距控制 */

value: p(padding), m(margin)
side: t(top), b(bottom), s(start|left), e(end|right), x(left & right), y(top & bottom), 未指定時 (top & bottom & left & right)
size: 0, 1, 2, 3, 4, 5, auto
breakpoint: sm, md, lg, xl, xxl

當對象有寬度時，設定.mx-auto時就能輕易水平置中（左右都塞滿了）。

負值的 margin

預設未開啟此功能，需至 SASS 調整參數 $enable-negative-margins: true 啟用。關鍵 calss 公式為 size 前綴使用 n 代表負值。其餘語法與正值 margin 相同。

/* for Margin fulloption */
size: n5, n4, n3, n2, n1, 0, 1, 2, 3, 4, 5, auto /* for margin use only */

gap 參數 (display:grid 模式）

如果你使用 display:grid 為顯示效果，提供控制 grid 容器內的子項目之距離參數 gap 值。

.gap-{size} /* 間距控制 */
.{gap}-{breakpoint}-{size} /* 響應式間距控制 */

size: 0, 1, 2, 3, 4, 5
breakpoint: sm, md, lg, xl, xxl

Visibility 操作

提供可試性的操作，原理操作 CSS 屬性 visibility 為 visible 或 invisible(hidden)。

.visible {
  /* 看的見 */
  visibility: visible !important;
}
.invisible {
  /* 看不見但存在 */
  visibility: hidden !important;
}

Z-index

Bootstrap 部分元件會利用 z-index 來呈現最佳的層級效果，各自持有標準的影響公式已設計好不宜異動。你不應該去異動這些 z-index 數據避免影響到所有 Bootstrap 在組合上的視覺邏輯。除非逼不得已你可以透過 SASS 去修改這些屬性值。

BS 最核心的 layout 規畫已經說明完畢，同時將通用類別的 flex 觀念也提過一遍。這些都屬於 BS 的最核心之設計，BS 主要是排版應用其餘都只是區域性的 CSS 效果而已，會用到那些 CSS 效果再適時查詢使用即可。

內容 Content

套入 Bootstrap 後，你可能發現有不少的 HTML 標籤原有的外觀效果與你印象中不太一樣（譬如 input, button, a, ul…)，因於 Bootstrap 重新定義 HTML 內容的 CSS 預設外觀，使得能更貼近設計所需風格。因此從這裡你會開始接觸一些很基本的像是文字、圖片、表格這類的內容相關 HTML 標籤或 class 屬性。

重置 reboot

大多網頁設計皆會將簡陋的 HTML 預設效果進行 reboot 重置，而 Bootstrap 不例外的也根據 Normalize 基礎進行一些規範，官網說明詳細這裡僅大略提供幾個重點說明：

  • 對於空間單位一律採用 rem 為主，使跨瀏覽器的呈現更得體
  • 每個元素（包含偽元素）都改用 box-sizing 為 border-box，使 box 空間計算上不易影響
  • body 設定了全域的 font-family, font-weight, line-height 及 color，使繼承權初始運作下讓整體網頁不會不一致
  • 預設 body 的 background 為 #fff
  • 提供大量原生字型使用（雖提供 Noto Sans 但非 TC 版，中文顯示於粗體上略無飽滿）
  • Header 標籤類型都移除了 margin:top 設定改為 margin-bottom: .5rem 或 margin-bottom: 1rem （段落）
  • ui(ol), li 標籤調整了 margin 與 padding 的呈現效果， dl>dt>dd 同樣處理且額外調整粗體效果
  • 行內代碼 code 標籤增加顏色效果，而多行代碼 pre>code 則字型效果進行調整
  • var 標籤提供字型效果調整
  • kbd 標籤有明顯的黑底圓框效果
  • samp 標籤提供程式輸出的效果調整
  • table 標籤針對 border, padding 調整，同時搭配 caption 標籤能有效對齊一致，另有 table 單元公式項目可選用
  • form 與相關標籤的基本呈現調整更加簡潔，另有 form 單元公式項目可選用
  • 根據 HTML5 語意整合，任一元素添加 [role=button] 屬性會自帶 CSS 鼠標屬性 pointer
  • address 標籤調整 font-style 效果
  • blockquote 標籤重新定義 margin 使與其他元素有一致性切齊
  • addr 標籤視覺明顯化
  • detail>summary 標籤調整滑鼠屬性 poiner 作為互動提示
  • 根據 HTML5 語意整合，任一元素添加 [hidden] 屬性會自帶 display:none!important 效果

文字排版 Typography

使用 HTML 部分文字標籤時 Bootstrap 重新定義了這些外觀效果，另外可以透過 class 樣式表來表達一樣的模擬外觀。如果有些情況下不方便使用標籤時，必要時 Bootstrap 有設計成可改用 class 相同命名來取得標籤之外觀效果（十分好用能省下複合標籤，或在一些元件內進行組合使用）。以下為 Bootstrap 有重新定義化的基礎文字標籤。

如果你很熟悉 HTML 標籤名稱或十分信任 Bootstrap 的重新定義理念，這段內容可以快速帶過稍微認識即可，不用刻意去熟悉這些 class 化的標籤參數原理為何。

HTML 標籤 class 模擬屬性 外觀說明 Bootstrap 重新定義或參數說明
h1 ~ h6 .h1 ~ .h6 標題文字 h1 的 font-size 為 2.5rem，h2 為 2rem，之後每降一級減去 0.25rem
small .small 次文字 為原尺寸後為再縮小 80%
.text-muted 減弱文字 能使文字產生灰化文字，類似提示字應用
.display-* 超大文字 做特大的廣告或是主題文字尺寸， * 1~6 數字代表小至大（同 heading 邏輯）
.lead 前導文字 作為 p 段落的前導，效果為 font-size: 1.25rem 與 font-weight: 300 而已
mark .mark 標記文字 行內產生黃底標記的效果
del, s 刪除文字 行內產生一條線位於文字中央水平，有刪除線的效果
ins, u .text-decoration-underline 底線文字 行內同上但是放於底部，有底線效果
strong, b .text-decoration-line-through 粗體文字 行內文字加粗，綁訂了 font-weight: bolder 效果
em, cite 斜體文字 文字斜體化
abbr 縮寫文字 英文縮寫提示底點效果（搭配屬性 title）並提供 hover 鼠標問號，可增加 .initialism 縮小 0.875rem
blockquote.blockquote 引用文字 對 blockquote 追加.blockquote 能使效果更好些
.blockquote-footer 引用來源文字 產生前面有—符號之淺灰小字，同時此處你應該使用 footer 標籤並上層為 blockquote 標籤
.text-center & .text-end 文字對齊 使文字居中或靠右，這些會能在通用類別更詳細解說到
.list-unstyled 清除列表樣式 通常寫在 ul 或 ol 這類標籤內，使原外觀效果完全清除
.list-inline > list-inline-item 列表水平化 將列表 inline 水平化並適時 margin 分開，常用於水平選單
.text-truncate 省略文字 當超出空間 overflow 時會轉成 … 做省略之效果

根據 HTML5 語意定義，行內文字的描述有所規範使用：（若僅想要視覺不要語意應使用 class 模擬屬性）

  • mark 提供強調語氣
  • small 為註釋，例如版權說明
  • s 代表此段落已失去相關或可信性
  • u 具有非文本註釋之意
  • b 突顯單詞或短語
  • i 語音或專有技術名詞

圖片 images

圖片沒有太多重要的外觀公式，主要還是依賴基本 class 公式並保持 box 觀念，像是你應該知道.float-{start|end} & .text-{start|end} & .m{s|e}-auto這三者的原理與應用場合。

class 屬性 效果說明 Bootstrap 重新定義或參數說明
.img-fluid 響應式圖片 賦予 max-width:100% & hegiht:auto 使圖片跟隨父容器 box 填滿寬度並自動等比例高度
.img-thumbnail 縮圖框 對圖片產生 1px 的白框
.rounded 圓角化 對圖片圓角化 border-radius:0.25rem
.float-{start|end}
.text-{start|end}
.m{s|e}-auto		 靠邊對齊 基本方法很多都能適用，使能對向靠齊左右
.text-{center}
.mx-auto		 水平置中 同上理由

如果圖片採用的是 picture>source+img 這種標籤，其 Bootstrap 屬性應寫在 img 上而不是 picture

表格 table

Bootstrap 已先對 table 重置十分乾淨，大多數都會再套加一些給 table 專用的 class 公式。注意以下要點：

  1. 需要美麗的表格外觀，一定需要對 <table></table> 處添加 .table ，否則只有得到簡約表格。
  2. table 必須要完整結構，像是有<thead></thead>, <tbody></tbody>,<th></th>這些，不重視語意的可以不用宣告scope={row\|col}標籤屬性
  3. class 公式下的位置要對，思考對那裡變化就該用哪裡的 class 且效果可以累加。
class 屬性 位置處 效果說明 Bootstrap 重新定義或參數說明
.table table 美化表格 產生具有線格的表格，否則你只會得到潔白如玉的表格外觀
.table-{color} table, tr, th, td 表格主色 提供色底黑字之表格效果（ dark 為白字配）。
color: primary, secondary, success, danger, warning, info, light, dark
.table-striped table 灰白間格 自動產生相間的條紋效果
.table-hover table 滑過效果 產生滑鼠移過時該排 tr 有灰底效果
.table-active tr, th, td 局部強調 針對指定行或欄位進行著色。
.table-bordered table 線條化 四邊框線為 border:1px solid #dee2e6，可搭配 border-{color} 調色
.table-borderless table 清除線條 四邊框線為無
.table-sm table 小表格化 欄位間隙縮短形成小表格
.thead-{dark|light} thead 暗化標題 提供兩種暗亮化標題之顏色效果
.caption-top table 標題位置 將 caption 原下方位置改為表格之前
.bg-{color} table, tr, th, td 背景色化 直接使用 background 公式提供色底（黑字）之表格效果，建議 table.table-dark 使文字顏色為白。
color:primary, success, danger, warning, info

table 的垂直對齊方式根據 vertical-align 操作，提供一下三種 class 公式能適用於 table, tr, th, td：

  • align-middle : 至中
  • align-bottom: 靠上
  • align-top：靠下

table 所有效果對於 tfoot, caption 也有宣染套入。

響應式表格 (in table 標籤）

預設的表格會自動收縮到最低內容寬，可以使用響應式公式指定這些表格何時跳脫收縮而鎖定寬度產生水平滾軸使人滾動。

/* table responsive */
.table-responsive /* 不允許收縮，擠壓時直接啟用水平滾軸 */
.table-responsive-{breakpoint} /* 響應式表格，何種狀態下就開始不允許收縮 */

breakpoint: sm, md, lg, xl, xxl

圖片區塊 figure

figure 屬於 HTML5 的新型態標籤，拿來作為圖片並結合描述文字的獨立區塊。Bootstrap 對於這種圖片說明標籤用途有特別進行定義。figure 的定義為：

<!-- 使用 figure 主標籤包覆，內部包一個 img 標籤做圖片來源與 figcaption 標籤做說明文字 -->
<figure>
  <img src="..." alt="text"/>
  <figcaption>text</figcaption>
</figure>

而 Bootstrap 的定義用法為：

  1. 對 figure 主標籤添加.figure，變為 inline-block 並 margin-bottom 有 1rem 效果。
  2. 圖片標籤添加.figure-img，使下推 margin 有 0.5rem 效果。可適時添加 .img-fluid 自適應或 .rounded 圓角化之類的累加效果。
  3. 說明標籤添加.figure-caption，字色灰 #6c757d 且縮小 0.875em，適時添加 .text-{start|end} 可將文字靠齊呈現。
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="text">
  <figcaption class="figure-caption text-right">test</figcaption>
</figure>