wordpress_blog

This is a dynamic to static website.

聯絡我

Bootstrap5 複習01

gee.hsu

學習來自: 六角學院
課程: Bootstrap 5 網頁切版整合術
Thank you

環境建置

Bootstrap 文件介紹

文件說明 – 中文版

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

Bootstrap 中英文文件連結

VSCode 基礎環境建置

VSCode 與相關資源連結

相關套件:

更多參考套件

語系設置與 Bootstrap CDN

// index.html - 語系
<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Review BS5</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 - Bootstrap CDN
<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Review BS5</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 運用

補充說明: Class

// 樣式補充說明
<button type="button" class="btn btn-primary">Primary</button>

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

Class 其中的:

  • class 是 HTML 標籤的屬性名稱 – 每個標籤只能有一個
  • btn 則是其值 – 每個 Class 可以用空白隔開多個值
// index.html
<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Review BS5</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>

    <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>

快速體驗 Bootstrap 建立一個網站

// index.html
<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Review BS5</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-1663947718652-fa32fb546da2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              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-1663947718652-fa32fb546da2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              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-1663947718652-fa32fb546da2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              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-1663947718652-fa32fb546da2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              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>

Bootstrap 文件介紹

知識點: box-sizing

補充說明: box-sizing

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

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

// 簡報1
// width: 300px;
// height: 300px;
// padding: 50px;
// border: 10px solid green;
// margin: 50px;
div {
  width: 300px;
  height: 300px;
  padding: 50px;
  border: 10px solid green;
  margin: 50px;
}

// 寬度: 300px + 50 * 2px + 10 * 2px = 420px
// 簡報2
// width: 300px;
// height: 300px;
// padding: 50px;
// border: 10px solid green;
// margin: 50px;

div {
  width: 300px;
  height: 300px;
  border: 10px solid green;
  padding: 50px;
  box-sizing: border-box;
}

// 寬度: 300px = X + 50 * 2px + 10 * 2px
// index.html
<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Review BS5</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #ccc;

        padding: 50px;
        border: 5px solid black;
        margin: 50px;

        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

知識點: CSS Variables

// index.html
<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Review BS5</title>
    <style>
      /* 全域 */
      :root {
        --primary: #69f0ae;
      }
      .box {
        width: 100px;
        height: 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 單位

// em 與 rem
//  em 是相對的的數值單位，它會受到外圍的文字大小所影響，而 1em 即是 1 的文字大小， 1.5em 也就是 1.5 倍的文字大小。
// rem 也是相對的文字尺寸，和 em 使用方法接近，不同的是他僅相對於 root 層級的文字大小(網頁中的 html)。
// index.html
<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Review BS5</title>
    <style>
      html {
        font-size: 20px;
      }
      .em2 {
        font-size: 2em;
      }
      .rem2 {
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <!-- 
      網頁文字預設大小是 16px
      rem 與 em 的差別
      最外層設定會使用 :root 或者 html
    -->
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque voluptatem
      libero, magni consequatur quisquam quidem enim, alias voluptates, autem
      qui dolores eaque nam ad nostrum porro dignissimos vel totam. Error.
    </div>
    <hr />
    <div class="em2">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. In consectetur
      cum veritatis earum nesciunt nihil laudantium autem culpa, minima debitis,
      eligendi corrupti praesentium, id architecto soluta dolor quaerat dicta
      iure.
      <strong class="em2">veritatis earum nesciunt</strong>
    </div>
    <hr />
    <div class="rem2">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias delectus
      voluptate magnam placeat quos sapiente error harum est! At vero dolorum,
      nostrum porro assumenda delectus veniam expedita possimus exercitationem
      praesentium.
      <strong class="rem2">veritatis earum nesciunt</strong>
    </div>
  </body>
</html>

知識點: 系統預設字體

補充說明: 系統預設字體 – 樣式補充說明

系統 系統預設 英文字體 中文字體
Windows Segoe UI Microsoft JhengHei / 微軟正黑體
Mac OS -apple-system San Francisco / Helvetica Neue 蘋方(PingFang) / Heiti TC
iOS -apple-system San Francisco / Helvetica Neue 蘋方(PingFang) / Heiti TC
Android Roboto Noto Sans

Bootstrap 預設字體

// Bootstrap 預設字體
$font-family-sans-serif:

  // 使用系統預設的字體
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,

  // 指定已知的系統 UI 字體
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // CSS 定義字體、Emoji 等等
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

CSS Reset 做了什麼

// index.html
<!DOCTYPE html>
<html lang="zh-tw">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Review BS5</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 {
        width: 100px;
        height: 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 練習手冊連結

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

文字運用

// 標題
// 全部的 HTML 標題從 <h1> 到 <h6> 均可使用。
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
// 當你想匹配某一標題的字體樣式，但不能直接使用 HTML 元素時，使用 .h1 到 .h6 的類別。
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
// 自定義標題
// 使用通用類別重現 Bootstrap 3.0 中的小標題文本。
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>
// 顯示標題
// 一般的標題元素能在頁面內容繁多時發揮最佳作用。當你需要突出一個標題時，請考慮使用 display heading 以獲得更大、更細、稍具有風格化的標題樣式。
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
// 前導主題
// 使用 .lead 讓一個段落脫穎而出。
<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>
// 行內文本元素
// 使用行內 HTML5 元素的格式。
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
// 縮寫
// 對縮寫和字母字首縮寫使用 HTML <abbr> 元素以 Hover 方式顯示縮寫的擴增內容。縮寫具有預設的底線和説明游標，透過懸停和輔助性技術幫助使用者提供額外的內容。
// 縮寫字加入 .initialism 可將字體略為縮小。
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
// 引用
// 用於文件中引用來自另一個來源的內容。在 HTML 周圍使用 <blockquote class="blockquote">。
<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

// 引用來源
// HTML 規範要求將 blockquote 歸屬於 <blockquote> 之外。當提供來源歸屬，需要將 <blockquote> 包在 <figure> 之內，並且使用 <figure> 和加上 .blockquote-footer 類別的 <figcaption> 或是一個區塊元素(例如：<p>)。還要確保將來源的名稱包在 <cite> 中。
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
// 對齊
// 使用文字通用類別來更改 blockquote 的對齊方式。
<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
// 列表
// 無樣式
// 刪除預設的 list-style 和列表項目上的左 margin（僅限直接子項）。僅適用於直接子項目列表，這意味著你需要為巢狀的列表添加類別。
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>
// 行內
// 移除了列表編號並增加些許 margin，結合使用 .list-inline 和 .list-inline-item。
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>
// 描述列表對齊
// 通過使用我們網格系統定義的類別（或是語意 mixins）將項目和說明水平對齊。對於較長的術語，你可選擇性加上 .text-truncate 來用 … 取代多餘內容。
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

基本圖片運用

// 響應式圖片
// Bootstrap 中的圖片可利用 .img-fluid 設定為響應式圖片。運用 max-width: 100%; 和 height: auto;，讓圖片可依父元素進行縮放。
<img src="..." class="img-fluid" alt="...">
// 圖片縮略圖
// 除了我們的 邊框-圓角 通用類別 之外，你可以使用 .img-thumbnail 讓圖片呈現圓角 1px 的邊框。
<img src="..." class="img-thumbnail" alt="...">
// 對齊圖片
// 用 輔助方法 浮動類別 或是 文字 對齊類別 讓圖片對齊。屬性為 block 的圖片可以使用 .mx-auto margin 通用類別 置中。
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>

圖片區

// 圖片區 (Figures)
// 當需要顯示一段內容，例如包含可選擇標題的圖檔時，可以考慮使用 <figure>。
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
// 使用我們的 text utilities 可以很容易地對齊圖片標題。
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

表格運用

// 表格
// 概述
// 在任何 <table> 加上基本類別 .table，接著使用我們的可選修飾類別或是自定義樣式進行擴展。所有表格樣式在 Bootstrap 中都不會繼承，意味著巢狀表格的樣式都是獨立於父表格。
// 使用最基本的表格排版，以下是基本的 .table 在 Bootstrap 中的外觀。
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
// 變數
// 使用語意化 class 給表格列或單元格上色。
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>
// 表格強調
// 條紋行
// 使用 .table-striped 在 <tbody> 範圍內任何表格行增加條紋樣式。
<table class="table table-striped">
  ...
</table>

// 這些類別也可以添加到表格變數中：
<table class="table table-dark table-striped">
  ...
</table>
// 可滑入行
// 添加 .table-hover 以便在 <tbody> 範圍內的表格行上能夠呈現已滑入的狀態。
<table class="table table-hover">
  ...
</table>

<table class="table table-dark table-hover">
  ...
</table>

// 這些可滑入行也可以和條紋行的變數結合使用。
<table class="table table-striped table-hover">
  ...
</table>
// 表格啟用
// 透過 .table-active 類別突顯表格行或單獨的儲存格。
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
// 表格邊框
// 帶框的表格
// 使用 .table-bordered 在表格和儲存格的四邊上添加邊框。
<table class="table table-bordered">
  ...
</table>

// 通用類別的邊框顏色 可以用來改變顏色:
<table class="table table-bordered border-primary">
  ...
</table>
// 無框的表格
// 使用 .table-borderless 使表格呈現無外部邊框。
<table class="table table-borderless">
  ...
</table>

<table class="table table-dark table-borderless">
  ...
</table>
// 小表格
// 使用 .table-sm 將儲存格 padding 縮減一半的方式讓表格更加精簡。
<table class="table table-sm">
  ...
</table>

<table class="table table-dark table-sm">
  ...
</table>
// 垂直對齊
// <thead> 中的儲存格始終與底部垂直對齊。<tbody> 中的儲存格繼承自 <table> 頂部的對齊方式。使用 垂直對齊 類別在需要的地方重新對齊。
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>
// 巢狀
// 巢狀表格不會繼承邊框樣式，啟用樣式以及表格變數。
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>
// 結構
// 表頭
// 與表格和深色表格類似，使用修飾符類別 .table-light 或 .table-dark 使 <thead> 呈現淺灰色或深灰色。
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
// 表尾
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>
// 表格標題
// <caption> 是一個表格的標題。它可以協助使用螢幕閱讀器的用戶找到表格，了解它的內容，並且決定是否要閱讀它。
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

// 你也可以使用 .caption-top 將 <caption> 放在表格的最頂端。
<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
// 響應式表格
// 響應式表格呈現水平滾動，可以使用 .table-responsive 包覆 .table 讓任何響應式表格跨裝置使用。或者 .table 中加入 .table-responsive{-sm|-md|-lg|-xl|-xxl} 創建響應式表格的最大斷點。
// 始終呈現響應式
// .table-responsive 可讓表格水平滾動來跨斷點使用。
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
// 特定斷點
// 根據需要的響應式表格設定 .table-responsive{-sm|-md|-lg|-xl|-xxl}。從該斷點開始，表格將正常運行並且不會水平滾動。
// 這些表格可能會跑版，直到它們的響應樣式應用於特定的視窗寬度。
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>