Bootstrap 5 網頁切版整合術(1)

CH2 – 環境建置

Bootstrap 文件介紹

Getting started	快速開始
Customize	自定義
Layout	排版
Content	內容
Form	表單
Components	元件
Helpers	工具
Utilities	通用類別
Extend	擴增
About	關於

中英文對照

Bootstrap 中英文文件連結

VSCode 基礎環境建置

VSCode 與相關資源連結

VSCode 官方網站

相關套件:

語系設置與 Bootstrap CDN

語系參考文件

// index.html - 1 語系

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <p lang="zh-TW">繁體台灣 zh-TW：骨，花、學、崎、雨</p>
  <p lang="zh-HK">繁體香港 zh-HK：骨，花，學、崎、雨</p>
  <p lang="zh-CN">簡中 zh-CN：骨，花、學、崎、雨</p>
  <p lang="ja">日文 ja：骨、花、學、崎、雨</p>
  <hr>
  <p lang="zh-TW">繁體台灣 zh-TW：骨，花、學、崎、雨</p>
  <p lang="zh-Hant-TW">繁體台灣 zh-Hant-TW：骨，花、學、崎、雨</p>
  <p lang="zh-HK">繁體香港 zh-HK：骨，花，學、崎、雨</p>
  <p lang="zh-Hant-HK">繁體香港 zh-Hant-HK：骨，花，學、崎、雨</p>

</body>
</html>

// index.html - 2

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>

  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>

  <button type="button" class="btn btn-link">Link</button>

  <hr>

  <button type="button" class="btn btn-outline-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
  <button type="button" class="btn btn-outline-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
  <button type="button" class="btn btn-outline-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

快速開始 > 簡介

CSS 的 Class 運用

樣式補充說明

<button type="button" class="btn btn-primary">Primary</button>

Bootstrap 中會加入大量的 Class 來套用樣式，每一個 Class 都代表了部分的結構、樣式、狀態等等…

Class 其中的:

class 是 HTML 標籤的屬性名稱 – 每個標籤只能有一個
btn 則是其值 – 每個 Class 可以用空白隔開多個值

快速體驗 Bootstrap 建立一個網站

// index.html

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <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">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>

  <div class="container my-4">
    <div class="row row-cols-1 row-cols-md-2 g-4">
      <div class="col">
        <div class="card">
          <img src="https://images.unsplash.com/photo-1645516956968-dee62f4a9090?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://images.unsplash.com/photo-1645516956968-dee62f4a9090?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://images.unsplash.com/photo-1645516956968-dee62f4a9090?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://images.unsplash.com/photo-1645516956968-dee62f4a9090?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer class="bg-light py-4">
    <div class="container">
      <p class="mb-0">這裡是 Footer</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

CH3 – Bootstrap 文件介紹

知識點：box-sizing

由於 padding 及 border 會改變元素運算後的寬度，避免麻煩的計算，Bootstrap 預設載入 box-sizing: border-box

定義的寬度 = 實際呈現的寬度

知識點：CSS Variables (CSS 變數)

// 範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5</title>
  <style>
    /* 全域 */
    :root {
      --primary: #69f0ae;
    }

    .box {
      height: 100px;
      width: 100px;
      padding: 20px;
      border: 5px solid #eee;
    }

    .bg-primary {
      background-color: var(--primary);
    }

    /* 進階技巧 */
    .local {
      --primary: orange;
    }

  </style>
</head>
<body>
  <div class="box bg-primary"></div>
  <div class="local">
    <div class="box bg-primary"></div>
  </div>
</body>
</html>

知識點：rem 單位

網頁文字預設大小是 16px。

rem 與 em 的差別。

最外層設定會使用 :root 或者 html

// css_rem_em.html - 範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5</title>
  <style>
    html {
      font-size: 20px;
    }
    .em2 {
      font-size: 2em;
    }
    .rem2 {
      font-size: 2rem;
    }
    .py-1 {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  </style>
</head>
<body>
  <div>
    Lorem, ipsum.
  </div>
  <div class="em2">
    Lorem, ipsum.
    <strong class="em2">Lorem, ipsum.</strong>
  </div>
  <hr>
  <div class="rem2 py-1">
    Lorem, ipsum.
    <strong class="rem2">Lorem, ipsum.</strong>
  </div>
</body>
</html>

知識點：系統預設字體

樣式補充說明

Bootstrap 預設字體

CSS Reset 做了什麼

Reboot 專用 CSS

// reboot.html - 範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <style>
    .box {
      height: 100px;
      width: 100px;
      padding: 20px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <!-- 重點 1: 會套用 Bootstrap 預設字體、字體大小、行間距等等 -->
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>

  <!-- 重點 2: 套用 box-sizing -->
  <div class="box"></div>

  <!-- 重點 3: 套用 list 等其他標準 Normalize 樣式 -->
  <ul>
    <li>All lists have their top margin removed</li>
    <li>And their bottom margin normalized</li>
    <li>
      Nested lists have no bottom margin
      <ul>
        <li>This way they have a more even appearance</li>
        <li>Particularly when followed by more list items</li>
      </ul>
    </li>
    <li>The left padding has also been reset</li>
  </ul>

  <!-- 重點 4: 包含 Bootstrap 所釋出的變數色彩 -->
  <div class="box" style="background-color: var(--bs-primary);">

  </div>
</body>
</html>

內容 > 重置

六角學院專屬「Bootstrap 練習手冊」

使用 ctrl + p 然後把檔名貼上，開啟練習的檔案。

Bootstrap 5 練習手冊連結

Bootstrap 5 練習手冊

解壓縮後請務必使用 Live Server 開啟。

文字運用

建議使用上使用 <del>、<ins>，避免使用舊的標籤 <s>、<u>。

text-align: left, right, center

left → start、right → end

list-unstyled 開發中常用的 class

dl、dt、dd

格線系統

內容 > 文字排版

基本圖片運用

img-fluid

rounded、img-thumbnail

clearfix、float-start、float-end

mx-auto

text-center

內容 > 圖片

圖片區

figure、figure-caption

text-center、text-end

內容 > 圖片區

表格運用

table、thead、tbody、tfoot

table-primary、table-success、table-dark

table-primary、table-secondary、table-success、table-danger、table-warning、table-info、table-light、table-dark

table-striped

table-hover

table-active

table-bordered、border-warning

table-borderless

align-middle、align-top、align-bottom

巢狀

結構: 表頭 thead、表尾 tfoot、tbody、表格標題 caption, caption-top

table-responsive、table-responsive{-sm|-md|-lg|-xl|-xxl}

測驗：Bootstrap 文件介紹

CH4 – Flex 與網格系統介紹

基礎格線觀念

但是網頁並不像是平面設計是靜止不動的，會因為使用者的裝置大小、瀏覽器顯示區域、甚至是操作方式，都會改變內容或者排版。
所以說，在網頁設計上的格線尺寸該如何分割?

會以 960px 為基準，也是因為早期電腦螢幕通常為1024px，960px 的設計是最為剛好。
而 12 欄則是較多數字的公倍數。

12 Column Grid

3 9
6 6
3 3 3 3

Total Width、Number of Columns、Gutter on outside、Gutter Width、Column Width

Columns、Count、Width、Gutter

Bootstrap 則是基於此概念作為延伸。

Bootstrap 5 還有…

預設包含 12 欄
除了預設欄以外，亦可使用等比欄位劃分
包含 5 種預設 Gutter 寬度
提供欄、列的組合形式

繪圖軟體與格線之間的關聯性

Figma

響應式中斷點

在 Bootstrap 的格線系統、後面的章節都非常重要。

斷點在特定的寬度會觸發樣式。

Bootstrap 是行動優先。

none、block

技巧: 先思考行動版，再補桌面版。

d-{breakpoint}-{value}

d-none、d-xl-none、d-xxl-none

d-none, d-xl-block

text-center, text-lg-start

格線容器

容器就是主要內容放置的區塊。

Bootstrap 容器概念

Bootstrap 的 container Class 主要是用來定義最外層的容器
在使用上分為兩大類:
分別為應對滿版寬度及階段固定寬度兩種

container-fluid

如果網頁內容不需要嚴謹的定義最大寬度
可以使用 container-fluid

對於網頁內容寬度的階段美感都很要求
且需要最大寬度的限制可使用 container

最常用的是 container、container-fluid

排版 > 容器

欄:上篇

格線的基本架構 container, row, col

外層至少要有一層 container

網頁開發中出現水平卷軸算是蠻嚴重的失誤。

寬度運用: 限制單欄寬度 (預設為 12 欄)、換行、等寬欄(col)、彈性寬度(col-auto)

col 會自動平均分配剩餘的空間

col-auto 會依據內容調整空間

巢狀

排版 > 欄

欄:下篇

響應式

技巧: 先思考行動版，再補桌面版。

行動版 > 平板 md > 桌面版 xl

col-6、col-md-4、col-xl-3

行動版是單欄情況下，我們可以不製作 col-12。
當有其他 col 中斷點，可不加入 col-12。

推移 (offset): 目前大多會透過 flex 特性推移，offset 的運用情境較少。

欄與欄的間距: Gutter 觀念說明

Gutter 的運作概念

Gutter 在 CSS 中是如何製作的?

// 範例程式碼

.row {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.col-* {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

// Bootstrap 實作的程式碼

.row {
  --bs-gutter-x: 1.5rem;
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-left: calc(var(--bs-gutter-x) * -.5);
}

.row > * {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}

格線系統結構由外而內為 .container, .row, .col-**
class=”row” 內層建議使用 class=”col-xx”
最外層，在幫它補一個 class=”container” 吧

欄與欄的間距: Gutter

Gutter 的運用: 查看 gutter 的原始碼

可調整的 gutter: 使用 gx-{ 1-5 } 調整水平間距

運用情境: 在內層加上 gx-2

延伸: 垂直 gutter，使用方式: gx, gy, g

延伸: no-gutters，使用 gx-0 移除 gutter

響應式: 桌面版使用大間距、行動版移除間距

行列式: 使用 row-cols-{欄數} 定義內層欄數

運用情境: 使用 row-cols-{中斷點}-{欄數} 來製作不同欄線規劃，桌面版 xl: 4 大欄、平板 md: 3 大欄、行動版 xs: 2 欄

排版 > Gutter

CSS Flex 與格線系統

Flex 需要了解的

通用類別 > Flex

Utilities 通用類別: 間隔 Spacing

{property}{sides}-{size}、{property}{sides}-{breakpoint}-{size}

property 設定: m、p

sides 設定: t、b、s、e、x、y、blank

size 設定: 0、1、2、3、4、5

基本運用: 為以下區塊推移不同水平距離、為以下區塊推移垂直距離、清除文字的向下 margin、為按鈕加上更大的水平 padding。

水平置中 margin-left: auto; margin-right: auto;、mx-auto

負值運用，注意：此功能預設是被關閉的，需要調整設定檔案才會開啟，未來課程會介紹如何調整 Bootstrap Sass 即可開啟此功能。

Gap: display grid 適合排版極為複雜的格線，大部分的網頁運用建議還是以 Bootstrap 網格系統為主。

通用類別 > 間距

Utilities 通用類別: Flex

啟用 flex，flex 包含行內及區塊兩種 (大多實戰以區塊為主，行內則較少使用)

方向性:
使用 .flex-row 來設定水平的方向(瀏覽器預設值)，或是使用 .flex-row-reverse 來作水平方向的反轉。
使用 .flex-column 設置垂直方向，或者使用 .flex-column-reverse 作垂直方向的反轉。

Justify content，包含以下的 justify content 運用方式
justify-content-start、justify-content-end、justify-content-center、justify-content-between、justify-content-around、justify-content-evenly

Align items，包含以下 align-items 運用方式
align-items-start、align-items-end、align-items-center、align-items-baseline、align-items-stretch

Align self，內層元素的對齊方式
align-self-start、align-self-end、align-self-center、align-self-baseline、align-self-stretch

Auto margins (重要技巧)，使用 margin auto 推移區塊
me-auto、ms-auto

With align-items
mb-auto、mt-auto

Wrap，使用 .flex-nowrap 完全不換行 (瀏覽器預設)，使用 .flex-wrap 進行換行，或使用 .flex-wrap-reverse 進行反向換行

Order，order 只能使用從 0 到 5 的整數值，任何額外值則需要自定義的 CSS

Align content，注意！ 此特性對於單行的 Flex 項目沒有作用。
align-content-start、align-content-end、align-content-center、align-content-around、align-content-stretch

Media object，加入 flex-row-reverse 為區塊反轉

通用類別 > Flex

格線系統與 Utilities 的混合運用

Flex 運用，置中排列、分散排列、兩端分散、反轉、垂直置中、單一元素垂直置中、order 排序。

Spacing 運用，推移置另一端、換行間距(使用 utilites margin)。

格線系統: 實作練習

置中圖片，不需要所有內容都佔滿 12 欄寬。

基本三欄式，可以善用 flex 特性，將部分內容進行推移達到等高的視覺效果。

交錯式排列，技巧

只有主要內容需要套用容器、格線，背景可不需要套用
左右交錯也是很棒的視覺方式

左選單、右側內容

可善用 gutter 的大小差異，製作不同間距的格線
相同視覺群組，距離會較為接近

格線系統: 常見錯誤

外層缺少 .container

.row 內層加入 .col 以外的內容

都是 12 欄，可不需要使用格線功能

.col-md… 在行動版都是 .col-12，因此不需要加入

調整格線系統的水平間距(有風險的行為)

測驗: Flex 與網格系統介紹

CH5 – 通用類別 Utilities 與工具 Helpers

Utilities 與 Helpers 基本介紹

Background – 背景色彩 ★★

Background color，情境色均可套用在被景色另外還包含額外幾種背景專屬色彩，bg-body、bg-white、bg-transparent。

漸層色，另外可加上 .bg-gradient 套用漸層色。注意：此功能預設不會開啟，需要調整變數才能啟用。

通用類別 > 背景

Border – 邊框 ★★

Border，增加、對於無邊框來說可以加上 .border，或是 .border-{‘ 向} 來加入 border，減少、也可以加上 .border-0，或是 .border-{方向}-0 來移除 border。

邊框顏色，使用 .border-{情境色彩} 來加入 border 的顏色。

邊框寬度，使用 .border-{1-5 數值} 來調整邊框寬度。

Border-radius，可以加上 .rounded，或是 .rounded-{方向} 來加入圓角。以及使用 .rounded-pill、.rounded-circle 來製作不同圓的樣式。尺寸，可以加上 .rounded-{ 0-3 } 來調整圓角大小。

通用類別 > 邊框

Text color – 文字色彩

Colors，單純的文字顏色，可以使用 .text- { 情境色彩 } 來進行套用。

Display – 盒模型 ★★★

Notation，.d-{value} for 預設裝置、.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl。

value 為以下其中一個: none、inline、inline-block、block、grid、table、table-cell、table-row、flex、inline-flex。

Examples，使用 display inline、display-block 轉換以下盒模型。

隱藏元素，需求: 桌面板顯示、行動版隱藏。

運用在列印的 Display。

Flex 常見運用情境，水平等距排列、兩左一右、垂直排列。
justify-content-between、ms-auto、flex-column

通用類別 > Display

Float – 浮動

Overview，float-start、float-end、float-none。

Responsive

實戰運用，製作繞圖排文 float-start, me-3, mb-3、float-end, ms-3, mb-3。

清除浮動: 為以下元素套用 clearfix，使用 Google Elments 檢視。

通用類別 > 浮動

Interactions – 互動 ★

Text selection，user-select-all、user-select-auto、user-select-none。

Pointer events，pe-none、pe-auto。

通用類別 > 互動

Overflow- 溢出

使用四個預設的值與類別，即時的調整 overflow 屬性。預設情況下這些類別並非響應式的

overflow-auto、overflow-hidden、overflow-visible、overflow-scroll。

實戰技巧，使用 overflow-auto 製作水平滾動項目。

通用類別 > 溢出

Position – 位置 ★★

Arrange elements，格式為 {property}-{position}
property 為以下的其中一種:
top、start、bottom、end
position 為以下的其中一種:
0 – 0、50 – 50%、100 – 100%

你可以為元素加上 position-absolute, position-relative 改變定位形式，同時可透過 {property}-{position} 的形式加上定位。

Center elements
可以透過轉換通用類別 .translate-middle 將元素置中。
透過添加 .translate-middle-x 或 .translate-middle-y 類別，元素將只能在水平或垂直方向上定位。

Examples
可以將這些類別與現有的元件結合使用，創造新的元件。請記得你可以透過在 $position-values 變數添加實體以擴展它的功能。

Fixed top，將元素固定在螢幕的頂端 .fixed-top
Fixed bottom，將元素固定在螢幕的底部 .fixed-bottom

Sticky top，只有在滾動離開該元素之後才會執行。 .sticky-top 通用類別使用 CSS 的 position: sticky，並非所有瀏覽器都完全支持。

Responsive sticky top，.sticky-top 通用類別也支持響應式變化
sticky-sm-top、sticky-md-top、sticky-lg-top、sticky-xl-top。

通用類別 > 位置

Shadow – 陰影 ★

Examples，為以下方框加入不同等級陰影
shadow-none、shadow-sm、shadow、shadow-lg

案例說明: 請千萬不要把陰影加在格線上。

陰影的運用
很棒的陰影運用文章

通用類別 > 陰影

Sizing – 尺寸 ★★

Relative to the parent
分別加入 25%, 50%, 75%, 100% 和 auto

實戰運用
讓你的卡片等高呈現

還可以根據需求使用 max-width: 100%; 和 max-height: 100%; 通用類別

相對於視窗
vh, vw 以及 min

通用類別 > 尺寸

Text – 文字 ★

Text alignment (文字對齊)
加入 text-{start, center, end}

中斷點示範:
桌面版靠左、行動版置中

Text wrapping and overflow
使用 .text-wrap 類別來斷行文字。
可搭配 .text-nowrap 類別防止換行。

Word break (文字斷行)
使用 .text-break 設定 word-wrap: break-word 和 word-break: break-word 預防長文破壞元件的排版。

Text transform (文字變換)
請注意 .text-capitalize 只有將第一個字母轉為大寫，而其他字母不受影響。

Font size (文字大小)
使用 fs-{ 1-6} 來調整文字大小。

Font weight and italics (文字粗細和斜體)
font-style 通用類別的縮寫為 .fst-*， font-weight 通用類別的縮寫為 .fw-*。

Line height (行高)

Monospace (等寬字體)

Reset color (重置色彩)
使用 .text-reset 來重置一個文字或連結色彩，以便它們繼承父層的顏色。

Text decoration (文字裝飾)
加入 .text-decoration-{ underline, line-through, none } 改變文字裝飾。

通用類別 > 文字

Vertical alignment – 垂直對齊 ★

使用 vertical-alignment 通用類別改變元素的對齊
請注意，垂直對齊僅影響 inline、inline-block、inline-table、和 table 元素。

搭配 inline 元素:
註：inline 中不太建議調整 align-*，這會受到字體不同影響其結果。

搭配 table cell 元素:
註：這是實戰常用技巧，尤其是 align-middle。

通用類別 > 垂直對齊

Visibility – 可視性

依需求使用 .visible 或 .invisible
這完全不會改變 display 的值，也不影響佈局 – .invisible 元素仍會佔用頁面空間。

通用類別 > 可視性

Helper: Clearfix – 清除浮動

清除浮動
透過將 .clearfix 添加到父元素之中 可以輕鬆的清除 float 所造成的副作用。

工具 > 清除浮動

Helper: Colored links – 連結顏色 ★★

連結顏色
你可以使用 .link-* 類別為連結著色。不同於 .text-* 類別，這些類別具有 :hover 和 :focus 狀態
將以下顏色替換為 .link-{情境色彩}

工具 > 連結顏色

Helper: Ratio – 比例 ★

Example
將所有嵌入如 <iframe> 包在帶有 .ratio 和長寬比 class 的父元素中。我們的通用選擇器 .ratio > * 會自動調整直接子元素的大小。
加入 ratio-{ 16×9, 1×1, 4×3, 21×9 } 調整以下比例。

Custom ratios (自訂比率)
例如，要創建 2×1 的長寬比，請在 .ratio 上設置 --bs-aspect-ratio: 50%
必要設定寬、數值為寬的 %

工具 > 比例

Helper: Visually hidden – 視覺隱藏

視覺隱藏
在視覺上隱藏元素，但仍允許其透過 .visually-hidden 呈現給輔助技術（例如螢幕閱讀器）。在預設的情況下，使用 .visually-hidden-focusable 可以在視覺上隱藏元素，但是當元素被聚焦時（例如，使用鍵盤的用戶）可以顯示該元素。也可以將 .visually-hidden-hidden-focusable 應用於容器中的 :focus-within，當容器的任何子元素都獲得焦點時，將顯示該容器。

工具 > 視覺隱藏

Helper: Stretched link – 連結延伸 ★★

連結延伸
在一個連結上添加 .stretched-link 將可以使它的 containing block 變得可點擊，這是透過 ::after 虛擬元素達成的。在大多數的情況下，這意味著本身帶有 position: relative;，且內部包裝了具有 .stretched-link 類別之連結的元素將變得可點擊

在 Bootstrap 中卡片元件預設便帶有 position: relative，因此在這個情況下你可以安全的在卡片中的連結添加 .stretched-link，而無須更改任何其他 HTML。
為以下連結加入 .stretched-link

大多數自定義的元件並不預設帶有 position: relative，因此必須添加 position: relative，避免連結延伸到父容器以外的地方。
請確保延伸的外層包含 .position-relative

Identifying the containing block
如果延伸連結沒有確實運作，containing block 將可能是問題所在。以下的 CSS 屬性將使一個元素成為 containing block。
static 以外的 position 值
none 以外的 transform 或 perspective 值
在 transform 或 perspective 使用 will-change 作為值
none 以外的 filter 值，或是在 filter 使用 will-change 作為值 (只會在 Firefox 作用)

工具 > 連結延伸

Helper: Text truncation – 文字截斷 ★

文字截斷
對於較長的內容，可以添加 .text-truncate 類別，以透過刪節號截斷文字。需為 display: inline-block 或是 display: block。

實戰案例、補充

工具 > 文字截斷

測驗: 通用類別 Utilities 與工具

CH6 – 表單運用

知識點: 網頁親和性

範例
幫助文字需要與控制元件相關聯
幫助文字應該使用 aria-describedby 與表單控制元件相關連，這將確保輔助技術（例如螢幕閱讀器）在用戶 focus 或輸入 input 時將了解此幫助文字。

關於 ARIA 的文章
MDN WAI-ARIA 基礎、Google ARIA 簡介

快速開始 > 網頁親和性

表單運用概觀

概觀
確保在輸入框上使用正確的 type 屬性（例如，email 用於電子郵件地址或 number 用於數字信息），以利用較新的輸入控制，如電子郵件驗證、號碼選擇等。相關內容可參考：連結
完成以下表單範例:
加上 .form-control, .form-label, .form-text
確保 label for 與 input id 有正確對應
確保 input type 使用正確
確保 button 有正確套用 type

表單文字
加上 .form-text (且 id 與 input 屬性的 aria-describedby 進行對應)

可以使用任何典型的行內 HTML 元素實現行內文字。

禁用表格
為以下表單加上 disabled

表單 > 概觀

表單元素常用的 form-control

範例
為表單加上 .form-control

尺寸
為表單加上 .form-control-{ sm, lg } 等不同尺寸

禁用
為表單加上 disabled 屬性

僅能閱讀
為表單加上 readonly 屬性

僅能閱讀的文本
為 input 套用 readonly 及加上 .form-control-plaintext 樣式

檔案 input

顏色
為 input 加上 .form-control-color 樣式

資料清單
資料清單允許你創造一組可以在 input 內部被存取 (並自動補齊) 的 <option>。它們跟 <select> 元素很相似，但是在樣式設定上具有更多限制與差異。雖然大部分的瀏覽器和作業系統都包含一些對於 <datalist> 元素的支持，但他們的樣式充其量是不一致的。
建立 datalist 結構 (包含 datalist 及option 元素)
datalist 補上 id，並與 input list 屬性進行對應

表單 > 表單控制

表單 Select .form-select

預設
為元素補上 .form-select

尺寸
為元素加上 .form-select-{ sm, lg } 調整尺寸

同時支持 multiple 屬性
為元素加上 multiple 使其可以多選
為元素加上 size 限制顯示尺寸

禁用
為元素加上 disabled 使其無法運作

表單 > 選擇功能表

表單的 Radio 與 Checkbox 運用

檢查
為元素分別加上 .form-check, .form-check-input, .form-check-label
注意，label 與 input id 請務必對應上

Indeterminate (狀態不確定)
啟用下方的 JavaScript 查看結果。

禁用
為以下元素加上 disabled

選項按鈕
使用 type=”radio” 看有何不同 (注意: name 屬性必須一致)

禁用
為以下元素加上 disabled

切換開關
為以下元素加上 .form-switch 套用視覺效果

行內
加上 .form-check-inline 使其轉換成單行

沒有標籤

切換按鈕
通過使用 .btn 而非 .form-check-label 樣式在元素上創建類似 button 的核取方塊和選項按鈕。
核取方塊切換按鈕
此方法並沒有套用 JavaScript，是使用純 CSS 所完成，套用條件:
必須加上 .btn-check
id 必須完全對應
input 與 label 元素必須相鄰

選項切換按鈕

表單 > 核取方塊和選項按鈕

表單的 Range 樣式

概觀
將以下的 input type 改為 range
為以下元素加上 .form-range

禁用
為以下元素加上 disabled

最小與最大
有隱含值 min 和 max, 0 和 100 的區別，可以為 min 和 max 屬性賦予新的值
為以下元素加上 min 及 max 屬性

間距數值 (steps)
預設的情況，範圍輸入會 “讀取” 整數值。可以使用 step 值來改變
為以下元素加上 step 屬性

表單 > 範圍

群組式 input

基本範例
透過 input-group, input-group-text, form-control 製作群組 input

Wrapping
加入 flex-nowrap 調整換行形式

尺寸
不支援調整 input 群組中單一元素的大小
使用 .input-group-{ sm, lg } 調整大小 (不支援各別元素調整)

核取方塊和選項按鈕
使用 input-group-text 搭配 form-check-input 製作選項按鈕

多個 input
驗證樣式僅適用於只有單個 <input> 的 input 群組。

多附加組件

按鈕附加元件
搭配 .btn 製作 input-group

帶下拉式選單的按鈕
搭配元件的 .dropdown-toggle 製作下拉式選單

分段按鈕
加入 .dropdown-toggle-split 製作分段按鈕

自訂表單
自定義選單樣式
搭配 .form-select 製作選單樣式
自定義檔案 input

表單 > Input 群組

表單驗證技巧

自定義樣式
為了自定義 Bootstrap 表單驗證訊息，您需要將布林屬性 novalidate 添加到 <form> 中。這將會禁用瀏覽器預設的回饋工具提示，不過 JavaScript 的表單驗證 API 依然有效。
如何啟用 JavaScript 驗證
表單加入 novalidate 屬性
表單加入 needs-validation className(名稱可自訂)
加入 valid-feedback, invalid-feedback 回應結果
加入 JavaScript 驗證片段程式碼

瀏覽器預設值
瀏覽器本身就存在著預設驗證功能，但這並不會調整任何樣式

伺服器端
伺服器端意味著手動加入回饋樣式，回饋樣式包含:
is-valid, is-invalid
valid-feedback, invalid-feedback

支持的元素
<input> 和帶有 .form-control 的 <textarea> (在 input 群組中最多包含一個 .form-control)
帶有 .form-select 的 <select>
.form-check

,was-validated 是一個狀態，代表已經驗證過 (但驗證狀態還是會依據用戶行為再次調整)

工具提示
加上 valid-tooltip, invalid-tooltip 加上工具提示的視覺效果

表單 > 驗證

新的表單樣式! form-floating

範例
加入 .form-floating 製作浮動標籤

如果已經定義 value ，則 <label> 會自動調整為其浮動位置。
加入 value 屬性在以下 input

表單驗證樣式也可以按預期運作

文字欄位
預設情況下，帶有 .form-control 的 <textarea> 會跟 <input> 有相同的高度。
將以下改為 textarea 標籤

不要使用 rows 屬性來自定義 <textarea> 的高度，而是使用 height 屬性 (透過行內設定，或是自定義的 CSS)

選擇
為以下套用 .form-floating, form-select

排版
請確保將表單元素放在 column 類別裡面
將以下表單套用格線系統

表單 > 浮動標籤

表單排版技巧

通用類別
使用 mb-{ 1-5 } 調整表單間距

表單網格
使用格線系統排版表單

Gutters
調整表單之間的 gutter

可以使用網格 (Grid) 系統建立更複雜的排版。
使用格線系統，並加入 g-{ 1-5 } 完成複雜的排版

水平表單
透過將 .row 類別加入表單群組來建立使用網格系統的水平表單，並使用 .col-*-* 類別來指定標籤和表單控制 (Form controls) 的寬度。請確保有在 <label> 添加 .col-form-label ，使它們與相關的表單控制垂直置中。
在以下 label 加入 col-form-label 使其對齊

水平表單標籤尺寸
使用 col-form-label-{ sm, lg } 改變標籤尺寸

欄尺寸
使用不同 col-{ 中斷點 } 製作不同寬度 input

自動調整尺寸
使用 col-auto 符合 input 尺寸

你可以再次將其與有指定大小的 column 類別混合使用

行內表單
使用 .row-cols-* 類別來建立水平排版。
使用 .row-cols-lg-auto 來套用水平、垂直自動切換的排版形式

表單 > 排版

CH7 – Bootstrap 最實用的工具 – 元件

元件簡介

元件結構
結構與樣式分離

元件組合規則

元件模組大致包含以下規則

模組 (button, modal, pagination)
主題 (theme colors, primary, danger…)
樣式 (size, style)
狀態 (active, disabled)

元件與 JavaScript 之間的關係

關於 Data 屬性
在 Bootstrap 中，如果要透過 HTML 正確對應 JavaScript 互動方法，均需要使用 data-bs-* 來調用。

建構方式呼叫 Bootstrap JavaScript API

元件 > 互動視窗

手風琴 (Accordion)

範例
使用 Accordion 的摺疊效果
務必載入 Bootstrap JavaScript
外層元素必須要有 ID，內層的元素 data-bs-parent 必須對應外層（確保只會展開一個
被折疊的項目，必須有獨立的 ID 名稱，按鈕加入 data-bs-toggle=”collapse” 及 data-bs-target 對應此名稱

Flush
加上 .accordion-flush 來移除預設 background-color、外框和圓角使該手風琴能和父容器緊鄰。

Always open
移除內層 data-bs-parent 則可以將 accordion 的效果總是展開。

元件 > 手風琴 (Accordion)

警報 (Alerts) ★

範例
使用 alert 加上 alert- {情境色} 製作警告框

連結顏色
使用 alert-link 套用警告框內的連結色彩

額外的內容
alert 的樣式還包含了 .alert-heading、分隔線、段落等。

Icons
You can use flexbox utilities and Bootstrap Icons to create alerts with icons.
使用 Flex 重新對齊以下內容
快速使用 Bootstrap Icon 在 Alert 內
載入 Bootstrap ICON CDN
加入 ICON，並使用 utilities 調整大小、間距

移除
加上一個關閉按鈕並賦予 .alert-dismissible 類別，使警報的右上角新增額外的 padding 和關閉按鈕。
在關閉按鈕加上 data-bs-dismiss="alert" 屬性來觸發 JavaScript 函式。務必使用 <button> 元素，讓它可以跨裝置正常運行。
要以動態方式移除警報，可以使用 .fade 和 .show 類別。

元件 > 警報 (Alerts)

標籤 (Badges) ★

範例
標籤可以運用在標題上
標籤可以做為連結或按鈕的一部分

背景顏色
可以使用 bg-{情境色} 來調整 badge 的色彩，必要時可加入 text-dark 將文字改為深色。

膠囊標籤
使用 .rounded-pill 通用類別可以透過 border-radius 使標籤增加圓角。

定位技巧
使用通用類別，製作按鈕的額外提示效果。
外層加入: position-relative
內層: position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger

元件 > 標籤 (Badge)

麵包屑 (Breadcrumb) ★

Example
加入麵包屑
外層 ol 加入 .breadcrumb
li 加入 .breadcrumb-item
當前頁面加入 .active

Dividers
透過 ::before 以及 content 而自動被加入在 CSS 中。可以透過修改本地 CSS 自定義屬性 --bs-breadcrumb-divider 或 $breadcrumb-divider Sass 變數來改變
也可以使用嵌入式 SVG 圖示。通過我們的 CSS 自定義屬性，或是使用 Sass 變數來應用它。

元件 > 麵包屑 (Breadcrumb )

按鈕 (Buttons) ★★★

Examples
按鈕結構包含 btn 加入 btn-{情境色}。

Button tags
按鈕可以運用在各種標籤上。

Outline buttons
可以使用 btn-outline-{情境色} 製作 outline 形式的按鈕。

Sizes
可以使用 btn-lg, btn-sm 製作大小類型的按鈕。

Disabled state
button 標籤的按鈕可以加入 disabled 的屬性禁用按鈕。
使用 <a> 元素的禁用其行為與其他按鈕略有不同：
<a> 不支援 disabled 屬性，所以你必須添加 .disabled 使它在視覺上看起來被禁用。
加入一些友善的樣式，以禁用游標上的所有 pointer-events。
禁用按鈕應包含 aria-disabled="true" 屬性來向輔助性技術指示元素的狀態。
tabindex=”-1″

Block buttons
官方文件寫法 Display Grid（加入 d-grid gap-2）。
另一種寫法搭配使用 width: 100%。

以下為一個響應式的範例
行動版為滿寬，桌面版為單行。

可以使用網格系統的欄 (column) 類別來調整區塊級別按鈕的寬度（加入 col-6）。

Toggle states
加入 data-bs-toggle="button" 來切換按鈕的 active 狀態。

元件 > 按鈕 (Buttons)

按鈕群組 (Button group) ★★

Basic example
使用 btn-group 為多個按鈕加入群組。

Mixed styles
內層按鈕可以加上 btn-{情境色}。

Outlined styles
btn-outline-{情境色} 的外框按鈕一樣可以運用。

Checkbox and radio button groups
可以搭配 input, label 製作
checkbox 需加上 .btn-check
input 在前、label 在後
label for 與 input id 需要對應
之前在表單的核取方塊切換按鈕也有介紹過。

Button toolbar
btn-toolbar 可以包含多個 btn-group

將 input 群組與工具列中的按鈕群組進行混合
可以搭配 input-group 一起使用

Sizing
只需要在每個帶有 .btn-group 的元件加上 .btn-group-{lg, sm} 即可。

Nesting
當您想要下拉式功能表與按鈕群組混合時，只需要將 .btn-group 放在另一個 .btn-group 中即可。

Vertical variation
加入 .btn-group-vertical 將一組按鈕垂直堆疊而不是水平呈現。此處不支援分割下拉式功能表。

元件 > 按鈕群組 (Button group)

卡片 (Cards) ★★★

Example
加入以下 .card 套用卡片效果

Content types

Body
卡片的建構區塊為 .card-body。當你需要在卡片填充內容的時候請使用它

Titles, text, and links
.card-title, .card-link, .card-subtitle

Images
.card-img-top, .card-text

List groups
使用 .list-group-flush 在卡片內建立列表群組

混合樣式
卡片可以搭配 list-group 製作不同組合

Header and footer
為以下範例加入 .card-header
卡片頁首的樣式可以透過在 <h*> 元素添加 .card-header 來調整
為以下範例加入 .card-header, .card-footer

Sizing
卡片預設沒有特定的起始 width，除非另有聲明，否則它們的寬度將是 100％
搭配格線系統安排卡片排版

Using utilities
使用 utilities w-* 限制卡片寬度

Using custom CSS
直接使用 style 限制寬度也是沒問題的

Text alignment
使用 utilities 調整卡片內文字對齊

Navigation
搭配 nav-tabs 製作導覽列

Images
Image caps
使用 .card-img-top, card-img-bottom 將圖片符合卡片視覺效果。

Image overlays
使用 .card-img, card-img-overlay 將圖片置於背景。

Horizontal
使用格線系統，製作水平類型的排版效果。

Card styles
Background and color
使用 bg-{情境色} 製作不同顏色的卡片

Border
使用 border-{情境色} 製作不同邊框色彩的卡片

Mixins utilities

Card layout
這些排版選項還不是響應式的
Card groups
加入 .card-group 製作群組卡片
當在卡片群組使用 .card-footer，它們的內容將會自動對齊

網格卡片
使用行列式製作
行動版為單欄、桌面版為雙欄
如果需要相等高度時，把 .h-100 添加於卡片上。如果希望卡片預設就是等高，可以在 Sass 設置 $card-height: 100%。
卡片頁尾也會自動對齊

元件 > 卡片 (Card)

輪播 (Carousel)

Example
需要將 .active 添加到其中一個輪播元素上，否則輪播將不可見。另外一定要在 .carousel 上為控制項元件設置一個唯一的 id，特別是當你在一個頁面上使用多個輪播的時候。控制項和指示器元素必須具有與 .carousel 元素之 id 符合的 data-bs-target 屬性（或是連結的 href）。

Slides only
外層加上 data-bs-ride=”carousel”，並給予唯一的 ID
內層元素需要有一個 active

With controls
加入上一個與下一個控制項時，我們建議使用 <button> 元素，當然你也可以使用 <a> 來當作 button 使用，記得要替 <a> 元素加上 role="button"。
打開以下註解使用控制器，注意：控制器上的 data-bs-target 需對應外層 ID。

With indicators
打開以下註解使用指引器，指引器的 data-bs-target 需對應外層 ID，並且 data-bs-slide-to 需對應特定的投影片索引（從 0 開始計算）。

With captions
在任意 .carousel-item 中使用 .carousel-caption 替幻燈片添加字幕。

Crossfade
將 .carousel-fade 加到輪播中，以使用淡入淡出的取代滑動的動畫效果。

Individual .carousel-item interval
在 .carousel-item 上添加 data-bs-interval="" 以更改自動循環至下一個項目的延遲時間。

Disable touch swiping
使用 data-bs-touch=”false” 禁止觸控事件。

Dark variant
在 .carousel 上添加 .carousel-dark 以獲得暗色系的控制項、指示器及字幕。控制項已透過 CSS 屬性 filter 從它們預設的白色充填反轉。字幕與控制項具有用來自定義 color 及 background-color 的額外 Sass 變數。

元件 > 輪播 (Carousel)

關閉按鈕 (Close button) ★

之前有提到是在元件 > 警報的移除的地方有提到、使用到。

Example
提供一個選項，透過 .btn-close 以關閉或解除元件。

Disabled state

White variant
透過 .btn-close-white 類別將預設的 .btn-close 改為白色。

元件 > 關閉按鈕 (Close button)

摺疊 (Collapse) ★★

像是一個功能。

Example
點擊以下按鈕，透過改變 Class 來顯示及隱藏另一個元素：
.collapse 隱藏內容。
.collapsing 會在轉換的過程中被套用。
.collapse.show 顯示內容。
基本使用方式：
按鈕加上 data-bs-toggle=”collapse”
加上 href 或 data-bs-target 來對應項目

Multiple targets
id 僅能用來對應單一元素，如果要對應複數元素則可以使用 className。

元件 > 摺疊 (Collapse)

下拉選單 (Dropdowns) ★

Examples
Single button
在 .dropdown 中包裝下拉選單的切換（你的按鈕或連結）和下拉式功能表，或者另外一個聲明 position：relative; 的元素。可以從 <a> 或 <button> 元素裡觸發下拉選單。
按鈕外層加上 .dropdown、
按鈕加上 .dropdown-toggle、
下拉選單項目為 .dropdown-menu、
按鈕加上 data-bs-toggle=”dropdown”。
透過 <a>：

尺寸
按鈕下拉選單可以使用所有尺寸的按鈕，包括預設及分割下拉按鈕(套用 btn-sm, btn-lg) 。

Split button
添加了 .dropdown-toggle-split 以在下拉插入符號做適當間隔。

Dark dropdowns
透過在目前現有的 .dropdown-menu 增加 .dropdown-menu-dark 屬性。

Directions
Dropup
可以加上 dropup, dropend, dropstart 改變方向性。

Menu items
可以選擇在下拉選單中使用 <button> 元素，而不是僅使用 <a>。
可以使用 .dropdown-item-text 創建非交互式下拉選單。

Active

Disabled

Menu alignment
在預設的情況下，下拉選單會自動從父選單的頂部與左邊開始定位 100％。將因此若將 .dropdown-menu-end 加入至 .dropdown-menu 則會使下拉選單靠右對齊。

Responsive alignment
如果要使用響應式對齊，請增加 data-display="static" 屬性來禁用動態定位，並使用響應式變數類別。
如果要讓在特定斷點以上讓下拉選單靠右對齊，請加上 .dropdown-menu{-sm|-md|-lg|-xl}-end。

各種對齊範例

Menu content
Headers
使用 .dropdown-header 為列表加入標頭。

Dividers
使用 hr 標籤搭配 .dropdown-divider 製作分隔線。

Text
可以搭配 Utilities 自行排版樣式。

Forms
表單範例

Dropdown options
使用 data-bs-offset 或 data-bs-reference 來改變下拉選單的位置。

自動關閉的方法

元件 > 下拉選單 (Dropdowns)

列表群組 (List group) ★

Basic example
外層使用 list-group、
內層使用 list-group-item。

Active items
加上 .active 啟用視覺效果。

Disabled items
加上 disabled 禁用特定項目。

Links and buttons
使用 <a> 或 <button> ，並加入 .list-group-item-action 來創建具有 hover、禁用和啟用狀態的動態列表群組。
確保不要在這裡使用標準的 .btn
將以下結構改為 a 標籤。
對於 <button>，你也可以使用 disabled 屬性而不是 .disabled class。

Flush
使用 .list-group-flush 取消外框視覺效果。

Numbered
使用 ol 標籤搭配 .list-group-numbered 為項目加上數值。
運用範例。

Horizontal
使用 list-group-horizontal 及 list-group-horizontal-{中斷點} 將項目改為水平排列。

Contextual classes
使用 .list-group-item-{情境色} 製作不同底色的列表。
也可以使用 .list-group-item-action。請注意，在前面的範例中不存在 hover 樣式。另外還有支持 .active 狀態，應用它來指示情境列表群組項目上的啟用狀態。

With badges
使用 flex 搭配 badge。

Custom content

Checkboxes and radios
可以在不使用 <label> 的情況下使用它們，但請記住要包含 aria-label 以及必要的內容。

將 <label> 作為 .list-group-item 使用以創造較大的點擊區域。

元件 > 列表群組 (List group)

互動視窗 (Modal) ★★

Examples
Modal 結構包含：
modal、
modal-dialog、
modal-content、
modal-header, modal-body, modal-footer, …modal-title。

Live demo
啟用 Modal 功能
按鈕加上 data-bs-toggle=”modal”、
使用 href 或 data-bs-target 對應 modal ID
使用 data-bs-dismiss=”modal” 關閉 Modal

Static backdrop
加入 data-bs-backdrop=”static”，互動視窗不會因為點擊背景而關閉。

較長內容的滾動狀態
可以透過在 .modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。

Vertically centered
加入 .modal-dialog-centered 到 .modal-dialog 來使互動視窗垂直置中。

在兩個 Modal 中切換

Optional sizes
在 modal-dialog 加入 modal-{xl, lg, sm} 來改變 modal 尺寸。

Fullscreen Modal
使用 modal-fullscreen 製作滿版 modal，或使用 modal-fullscreen-{中斷點}-down 在特定寬度下運行。

元件 > 互動視窗 (Modal)

導覽與頁籤 (Navs and tabs)

Base nav
結構說明：
ul 為 .nav、
li 為 .nav-item、
a 則是使用 .nav-link

如果項目的順序很重要，可以使用與 <ul> 類似的 <ol>，或者使用 <nav> 元素。
也可以直接使用 a 標籤，則不需要使用 nav-item。

Available styles
Horizontal alignment
使用 .justify-content-center 置中對齊:
使用 .justify-content-end 靠右對齊:

Vertical
通過使用 .flex-column 通用類別更改 flex 的軸線方向以堆疊導覽。

Tabs
加入 .nav-tabs 以生成具有分頁標籤的介面。

Pills

Fill and justify
使用 .nav-fill 會將 .nav-item 內容按照比例分配空間。注意，這會佔用所有的水平空間，但並不是每個導覽項目都具有相同寬度。
使用 <nav> 導覽時，您可以忽略 .nav-item，因為客製化 <a> 元素的樣式僅需要 .nav-link。
創建等寬元素請使用 .nav-justified。所有的水平空間將被導覽連結佔據，但與上面的 .nav-fill 不同，每個導覽項都將是相同的寬度。

Working with flex utilities
在下面的範例中，我們的導覽將在最小中斷點以下堆疊，並從 small 斷點開始採用水平排版以填滿所有可用寬度。
行動版垂直排列、桌面版水平排列。

Using dropdowns
Tabs with dropdowns
搭配下拉式結構一樣式沒有問題的，加入 data-bs-toggle=”dropdown” 在以下範例中。

Pills with dropdowns
各種樣式互相搭配都是沒有問題的。

JavaScript 頁籤
分頁外層為 tab-content，內層為 tab-pane fade，並且其中一個加入 show active、
每個分頁需要有獨立的 id、
按鈕加上 data-bs-toggle=”tab”，並使用 data-bs-target 分別對應 id。

元件 > 導覽與頁籤 (Navs & tabs)

導覽列 (Navbar) ★★

結構說明：
外層
navbar 最外導覽列結構、
navbar-expand-{中斷點} 選單內容展開中斷點、
navbar-{dark, light}，亮暗色切換、
內層
.navbar-brand 用於您的公司，產品或專案名稱。
.navbar-nav 提供高度完整和輕便的導航（包括對下拉清單的支持）。
.navbar-toggler 用於我們的折疊插件和其他 navigation toggling 行為。
Flex 與 spacing 通用類別，用於表單控制與行為。
.navbar-text 用於垂直居中的文本字串。
.collapse.navbar-collapse 透過父層斷點來群組、隱藏導覽列內容。
加入一個選填的屬性 .navbar-scroll 來設置 max-height ，然後滾動展開內容.。

Brand
.navbar-brand 可以應用於大多數元素，但對錨點最有效，因為某些元素可能需要通用類別 Class 或自訂樣式。

Text
為以下程式碼加入 .navbar-brand

Image
可以將 .navbar-brand 中的文字替換為 <img>。

Nav
在導覽列中的導覽元件會盡可能的佔用水平空間，以保持您的導覽列內容安全對齊。
結構：
最外層：navbar-nav、
li：nav-item、
a：nav-link。
導覽有專屬的類別，依照需求你可以避免完全使用列表的方法，也可不使用 .nav-item。
在以下範例中加入 navbar-nav, nav-link。
還可以在導覽列的導覽元件使用下拉式選單。下拉式選單需要一個包裝元素進行定位，請確保為 .nav-item 和 .nav-link 使用單獨及巢狀的元素。
在以下結構中加入 data-bs-toggle=”dropdown”。

Forms
.navbar 中的直接子元素使用 flex 排版，預設為 justify-content: space-between。根據需要使用其他 flex utilities 來調整此行為。
打開以下註解查看表單的位置。
input 群組也可以這樣使用。如果導覽列整個都是表單，或者大部分是表單，則可以使用 <form>> 元素作為容器並保存 HTML。

Text
透過 .navbar-text 導覽列可以包含一些文本。

色彩方案
從 .navbar-light 選用淺色背景顏色，或者 .navbar-dark 用於深色背景顏色。然後，使用 .bg-* 通用類別自訂。

Containers
可以把導覽列包裝在 .container 中，將其置中於頁面 – 請注意，內部的 container 還是必要的。或是你可以在 .navbar 中包裝一個 container。
使用任意響應式容器以更改導覽列中內容的顯示寬度。

Placement
固定的導覽列使用 position：fixed，這意味著它們會脫離正常的 DOM 的文件流，並且可能需要自定義 CSS（例如 <body> 上的 padding-top），以防止與其他元素重疊。
還要注意 .sticky-top 使用 position：sticky，並沒有被所有瀏覽器支持。

滾動效果
行動版選單可透過設置 --bs-scroll-height: 100px; 為行動版的下拉選單限制高度，並維持滾動的效果。

Responsive behaviors
可以使用 .navbar-toggler, .navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl} 決定它們的內容何時會摺疊。
對於不需要折疊的導覽列，在導覽列中加入 .navbar-expand。對於總是折疊的導覽列，不要加任何 .navbar-expand class。

Toggler
在最小中斷點沒有 .navbar-brand：
在以下程式碼中加入 .navbar-expand-lg，.navbar-collapse 將會在 lg 以上尺寸展開。

External content
可以使用 data-bs-target 展開 navbar 上方的額外內容。

元件 > 導覽列 (Navbar)

Offcanvas – 側欄滑動導覽 ★

Examples
Offcanvas components
offcanvas 是從畫面側邊出現的元件，透過 JS 來切換期顯示與否。
外層包含 offcanvas, offcanvas-start，start, end, top, bottom 決定顯示方向、
必須給予一個特定 id、
內層包含 offcanvas-header, offcanvas-body, offcanvas-title 等樣式。

Live demo
為按鈕加上 data-bs-toggle=”offcanvas”、
使用 href 或 data-bs-target 指向 offcanvas id。

Placement
試著加入 offcanvas-top, offcanvas-bottom, offcanvas-end 查看其方向性。

Backdrop
可以使用 data-bs-scroll=”true” 在 offcanvas 開啟時維持背景滾動，使用 data-bs-backdrop=”false” 關閉覆蓋的背景色。

元件 > Offcanvas (畫布)

分頁 (Pagination) ★

Overview
在外層使用 <nav> 元素讓螢幕閱讀器和其他輔助技術用來識別為導航區塊。
分頁結構
外層 nav 標籤
ul 使用 .pagination
li 使用 .page-item
a 使用 .page-link

Disabled and active states
使用 .disabled 來顯示禁用狀態、 .active 顯示當前頁數。
您可以選擇將 active 或 disabled 的錨點改為 <span>，或是在上一個/下一個箭頭的情況下，省略連結以刪除點擊功能，在保留預期樣式的同時防止鍵盤 focus。

Sizing
使用 pagination-lg, pagination-sm 改變大小。

Alignment
使用 Utilities 進行對分頁對齊（置中、置右）。

元件 > 分頁 (Pagination)

佔位符 (Placeholders)

應該是 v5.1 新功能。

元件 > 佔位符 (Placeholders)

彈出提示框 (Popovers)

Example
注意：Popovers 預設是不會啟用的！
使用 Popover 在專案中：
元素加入：data-bs-toggle=”popover”、
title 屬性加入標題、
data-bs-content=”…” 加入內文、
加入相關 JavaScript（請放在 HTML 文件最後)。

Four directions
使用 data-bs-placement 加入 top, right, bottom, left 改變呈現的方向。

Dismiss on next click
點擊外部隱藏 Popover 可以加入 data-bs-trigger=”focus”，注意：在此請使用 a 標籤搭配 tabindex=”0″。

Disabled elements
對於禁用的彈出提示框觸發，您可能傾向使用 data-bs-trigger="hover focus" 來直接為用戶提供視覺回饋，因為用戶預期不會去點擊禁用的元素。

元件 > 彈出提示框 (Popovers)

進度條 (Progress) ★

How it works
外層使用 .progress 定義結構、
我們在內層使用 .progress-bar 來指定進度條目前的值。
為以下的 .progress-bar 加上寬度。

Labels
在 .progress-bar 中放置文字內容。

Height
為以下 progress 設置高度。

Backgrounds
使用背景色 Utilities 套用不同背景色。

Multiple bars
一個 .progress 內也可有多個 .progress-bar 已呈現堆疊的效果。

Striped
加入 .progress-bar-striped 至以下範例中以呈現條紋的視覺效果。

Animated stripes
條紋漸變也可以製成動畫。將 .progress-bar-animated 加到 .progress-bar 中。

元件 > 進度條 (Progress)

滾動監控 (Scrollspy)

How it works
必須使用在 Bootstrap 導覽元件 nav 或列表群組 list group.、
滾動監控需要在被監控的元素上設定 position: relative;，通常是 <body>.、
錨點 (<a>) 是必要的，且必須指向到該元素的 id.。

Example in navbar
被監控的結構需加上 position-relative、
被監控的元素加上 data-bs-spy="scroll" data-bs-offset="0"，並使用 data-bs-target 指向列表 id。
將 data-bs-spy="scroll" data-bs-target="#navbar-example2" 加入程式碼套用 scrollspy 的效果。

Example with nested nav
滾動監控也適用於巢狀的 .nav。如果巢狀 .nav 是 .active, 它的父層也會是 .active 狀態。

Example with list-group

元件 > 滾動監控 (Scrollspy)

讀取圖示 (Spinners) ★★

Border spinner
使用 spinner-border 套用旋轉的讀取效果。

Colors
使用 text-{情境色} 來套用顏色。
原理：顏色是使用 CSS 變數中的 currentColor 來套用文字色彩。

Growing spinner
使用 spinner-grow 放大的讀取效果。
使用 text-{情境色} 來套用顏色。

Alignment
Margin
Placement
Flex
水平置中
垂直置中
Text align

Size
增加 .spinner-border-sm 和 .spinner-grow-sm 製作一個較小的讀取圖示。
使用自定義 CSS 或 inline 來根據需要更改尺寸，為以下元素加入 style=”width: 3rem; height: 3rem;” 的程式碼。

Buttons
在按鈕中加入讀取的視覺效果。

元件 > 讀取圖示 (Spinners)

吐司 (Toasts) ★★

Overview
出於效能原因吐司是選擇性加入的，所以您必須自己將它們初始化。

Examples
Basic
Toast 結構：
外層包含 .toast
內層包含 .toast-header, .toast-body
可使用 data-bs-dismiss=”toast” 關閉吐司元件

Live
實際展示，Toast 需要使用 JavaScript 手動將它開啟，請打開後方 JS 的註解。

Translucent
吐司包含半透明的結構。

Stacking
透過將吐司包裝於 .toast-container 來推疊。
也可以在吐司添加額外的控制項與元件。

Color schemes
一樣可以透過 Utilities 來客製化各種的樣式及色彩。

Placement
使用 Utilities 重新調整 Toast 的定位。
對於會推播更多通知的系統，請考慮使用包裝元素的方式，讓它們可以堆疊顯示。
還可以使用 flexbox 通用類別來對吐司做水平和/或垂直的對齊。

元件 > 吐司 (Toasts)

工具提示框 (Tooltips) ★

Examples
在預設情況下，Tooltip 並不會啟用，啟用方式：
元素中加入，data-bs-toggle=”tooltip”、
加入 title 內容、
開啟後方的 JavaScript。
使用 data-bs-placement={ top, right, bottom, left } 來改變 tooltip 的呈現方向。
加入自定義 HTML:
加入 data-bs-html=”true”、
title 內使用 html 結構。
禁用的元素
禁用的元素是無法被 hover、focus 的，如果要解決可以：
加入 data-bs-toggle="tooltip" title="Disabled tooltip"、
補上 tabindex="0"。

元件 > 工具提示框 (Tooltips)

CH8 – JavaScript 操作

Bootstrap JS 操作簡介

使用 data-bs 套用方法
請至少要載入 CDN 才能使用此方法

使用 JS 套用方法
CDN 中的 bootstrap 可單獨啟用此方法

搭配 Webpack 運作
在 Webpack 中，所有的 JS 都建議使用模組的方式引入，此方法較為進階，建議有 ESM 相關知識後再行學習即可。

JavaScript 初始化行為

使用建構函式調用 Bootstrap 方法

元件 > 摺疊 (Collapse) > 透過 JavaScript > 方法

選項、方法以及事件

options：建立實體時所傳入的參數
methods：實體建立以後可以調用的方法
events：實體方法觸發時的監聽事件

元件 > 互動視窗 (Modal) > 透過 JavaScript

萬年不敗 jQuery

十年不敗 jQuery

CH2 – 環境建置

Bootstrap 文件介紹

Bootstrap 中英文文件連結

VSCode 基礎環境建置

VSCode 與相關資源連結

語系設置與 Bootstrap CDN

CSS 的 Class 運用

樣式補充說明

快速體驗 Bootstrap 建立一個網站

CH3 – Bootstrap 文件介紹

知識點：box-sizing

知識點：CSS Variables (CSS 變數)

知識點：rem 單位

知識點：系統預設字體

樣式補充說明

Bootstrap 預設字體

CSS Reset 做了什麼

六角學院專屬「Bootstrap 練習手冊」

Bootstrap 5 練習手冊連結

文字運用

基本圖片運用

圖片區

表格運用

測驗：Bootstrap 文件介紹

CH4 – Flex 與網格系統介紹

基礎格線觀念

Bootstrap 5 還有…

繪圖軟體與格線之間的關聯性

響應式中斷點

格線容器

Bootstrap 容器概念

container-fluid

欄:上篇

欄:下篇

欄與欄的間距: Gutter 觀念說明

Gutter 的運作概念

欄與欄的間距: Gutter

CSS Flex 與格線系統

Flex 需要了解的

Utilities 通用類別: 間隔 Spacing

Utilities 通用類別: Flex

格線系統與 Utilities 的混合運用

格線系統: 實作練習

格線系統: 常見錯誤

測驗: Flex 與網格系統介紹

CH5 – 通用類別 Utilities 與 工具 Helpers

Utilities 與 Helpers 基本介紹

Background – 背景色彩 ★★

Border – 邊框 ★★

Text color – 文字色彩

Display – 盒模型 ★★★

Float – 浮動

Interactions – 互動 ★

Overflow- 溢出

Position – 位置 ★★

Shadow – 陰影 ★

Sizing – 尺寸 ★★

Text – 文字 ★

Vertical alignment – 垂直對齊 ★

Visibility – 可視性

Helper: Clearfix – 清除浮動

Helper: Colored links – 連結顏色 ★★

Helper: Ratio – 比例 ★

Helper: Visually hidden – 視覺隱藏

Helper: Stretched link – 連結延伸 ★★

Helper: Text truncation – 文字截斷 ★

測驗: 通用類別 Utilities 與 工具

CH6 – 表單運用

知識點: 網頁親和性

表單運用概觀

表單元素常用的 form-control

表單 Select .form-select

表單的 Radio 與 Checkbox 運用

表單的 Range 樣式

群組式 input

表單驗證技巧

新的表單樣式! form-floating

表單排版技巧

CH7 – Bootstrap 最實用的工具 – 元件

元件簡介

CH5 – 通用類別 Utilities 與工具 Helpers

測驗: 通用類別 Utilities 與工具

元件結構
結構與樣式分離