# 文字
## 行內文本元素
* \<mark> 代表被標記或是重點強調的文本，以供參考或標記。
* \<small> 代表旁註和小字體，例如版權聲明和版權文字。
* \<s> 代表不再相關或不再準確的元素。
* \<u> 代表一定範圍的行內文字，應指示其具有非文本註釋的方式呈現。

## 文字對齊
text-align：
* left 文字靠左
* center 文字置中
* right 文字靠右
* justify 水平均分
* inherit 繼承父元素的text-align

## RWD文字排版
mixin 被包含在 Bootstrap 中，且只要包含 Bootstrap 的 scss 就可以使用這些 mixin。
Sass部分參考：[https://bootstrap5.hexschool.com/docs/5.0/content/typography/#sass](https://bootstrap5.hexschool.com/docs/5.0/content/typography/#sass)

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

# 圖片
## RWD圖片
Bootstrap 中的圖片可利用 .img-fluid 設定為響應式圖片。運用 max-width: 100%; 和 height: auto;，讓圖片可依父元素進行縮放。

<img src="..." class="img-fluid" alt="...">

## 圖片border
通用類別
border

//增加border
<span class="border"></span>
//減少
<span class="border-0"></span>
//套用顔色
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
//寬度
<span class="border border-1"></span>
//圓角
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-circle" alt="...">//圓形icon樣式
<img src="..." class="rounded-pill" alt="...">//膠囊形樣式

img-thumbnail

<img src="..." class="img-thumbnail" alt="...">

# 間隔
符號
如果是適用於所有從 xs 到 xxl 斷點的間隔通用類別，就不需加入中斷點縮寫。因為從 min-width: 0 以上開始都將應用這些類別，因此不受 media query 的約束。但若是針對其餘斷點，就需要包含中斷點縮寫。

對於 xs 使用固定格式 {property}{sides}-{size} 命名，對於 sm、md、lg、xl 和 xxl，使用格式 {property}{sides}-{breakpoint}-{size} 命名。

property 設定:

m - 設定 margin 的類別
p - 設定 padding 的類別
sides 設定:

t - 設定 margin-top 或是 padding-top 的類別
b - 設定 margin-bottom 或是 padding-bottom 的類別
s - (start) 在 LTR 設定 margin-left 或是 padding-left， RTL 設定 margin-right 或是 padding-right
e - (end) 在 LTR 設定 margin-right or padding-right， RTL 設定 margin-left 或是 padding-left
x - 同時設定 *-left 和 *-right
y - 時設定 *-top 和 *-bottom
blank - 同時設定 margin 或 padding 在元素的四個邊緣
size 設定:

0 - 設定 margin 或是 padding 為 0
1 - (預設) 設定 margin 或是 padding 為 $spacer * .25
2 - (預設) 設定 margin 或是 padding 為 $spacer * .5
3 - (預設) 設定 margin 或是 padding 為 $spacer
4 - (預設) 設定 margin 或是 padding 為 $spacer * 1.5
5 - (預設) 設定 margin 或是 padding 為 $spacer * 3
auto - 設定 margin 為 auto

# 圖片區
當需要顯示一段內容，例如包含可選擇標題的圖檔時，可以考慮使用 \<figure>。

使用內建的 .figure、 figure-img 和 .figure-caption 類別， 可提供 HTML5 \<figure> 和 \<figcaption> 標籤一些基本樣式設定。圖片沒有明確尺寸，請務必在 \<img> 標籤加上 .img-fluid 類別設定為響應式圖片。

使用 [text utilities]
(https://bootstrap5.hexschool.com/docs/5.0/utilities/text/#text-alignment) 可以很容易地對齊圖片標題。

<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

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

# 按鈕

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

## ouline按鈕樣式
需要一個按鈕，但不是使用填滿的背景顏色？ 用 .btn-outline-* 替換預設修飾用的 Class，以移除任何按鈕上的所有背景色及背景圖。

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

## 禁用狀態
disabled 布林屬性添加到任何 \<button> 元素中，使按鈕看起來處於禁用狀態。被禁用的按鈕具有 pointer-events: none，以防止觸發滑入以及啟用狀態。

   <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button> 

# 下拉式選單

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

## 分割按鈕

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

## 方向
dropup 來觸發開啟上拉選單的元素
dropend 來觸發開啟右拉選單的元素
dropstart 來觸發左拉選單的元素

<div class="btn-group dropup">//修改這邊
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

## 啓用與關閉
active 加入到下拉選單給予啟用狀態。要將啟用狀態傳達給無障礙請使用 aria-current 屬性並將 page 上的屬性設為 true
disabled 加入到下拉選單給予關閉狀態

//啓用
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

//關閉
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

# 卡片
<div class="card" style="width: 18rem;">

<img src="https://pbs.twimg.com/profile_images/1689110062202298368/uAV7iG5T_400x400.jpg" class="card-img-top" alt="...">

<div class="card-body">
<h3 class="card-title">Hachi</h3>
<p class="card-text">HACHI🐝11/19 「Close to heart」台北公演！</p>
<a href="[#](https://twitter.com/8HaChi_hacchi)" class="btn btn-primary">twitter</a>
</div>
</div>

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

# 麵包屑
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

## 更改分隔符號

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

# 表單
一般表單

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

## 禁用
disabled 屬性加入到 \<fieldset> 中以禁用其中所有控制元件。瀏覽器將所有位於 \fieldset disabled> 標籤內部的原生表單控制元件 (\<input>, \<select>, 和 \<button> 元素) 視為禁用的，避免它們與鍵盤、滑鼠產生互動。

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

## input

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>

<div class="input-group">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

# 表格
boostrap基本table樣式

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

## RWD表格
若我們希望當視窗縮小時，表格下方自動出現水平卷軸，使表格內容大於視窗寬度時還能滑動卷軸觀看，我們可以在\<table>外層再包一層\<div>，並在\<div>中加入 table-responsive 這個 class 名稱。
可以將 table-responsive 搭配響應式斷點(sm、md、lg)做為 class 名稱一起使用:

table-responsive-sm
當視窗寬度 ≦ 575.98px 時出現水平卷軸
table-responsive-md
當視窗寬度 ≦ 767.98px 時出現水平卷軸
table-responsive-lg
當視窗寬度 ≦ 991.98px 時出現水平卷軸

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

## 表格欄位顔色

<!-- 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 條紋樣式

<table class="table table-striped">
  ...
</table>

.table-light/dark/success...等色系樣式
可參考:[https://zh.wikipedia.org/wiki/Template:Success](https://zh.wikipedia.org/wiki/Template:Success)

## 可滑入行
添加 .table-hover 以便在 \<tbody> 範圍內的表格行上能夠呈現已滑入的狀態。
<table class="table table-hover table-sm">
<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>s
</tr>
</tbody>
</table>

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

## 表格框綫
使用 .table-bordered 在表格和儲存格的四邊上添加邊框
通用類別的邊框顏色 可以用來改變顏色

<table class="table table-bordered">
  ...
</table>

無框綫使用 .table-borderless 使表格呈現無外部邊框

<table class="table table-borderless">
  ...
</table>

## 縮小表格
使用 .table-sm 將儲存格 padding 縮減一半的方式讓表格更加精簡。
<table class="table table-hover">
<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>s
</tr>
</tbody>
</table>

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

# 互動視窗
## 範例

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div><!--end header-->
      
      <div class="modal-body">
        <div id="selectTree" class="ztree" style="hegiht:500px;overflow:auto;">
            //内容
        </div>
      </div><!--end body-->
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div><!--end footer-->
      
    </div>
  </div>
</div>

## 動態視窗元件
盡可能地包含動態視窗標題與移除按鈕，或提供另一個明確的移除操作，簡單來説點一下其他地方就會消失

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

## 靜態背景
當將背景設置為靜態時，互動視窗不會因為點擊背景而關閉

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

## 添加滾動條
.modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗

<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

# 輪播
## 僅有幻燈片
這是一個只有幻燈片的輪播。 請注意在輪播圖片上存在 .d-block 和 .w-100，以避免瀏覽器預設的圖像對齊

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://pbs.twimg.com/profile_images/1689110062202298368/uAV7iG5T_400x400.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://pgw.udn.com.tw/gw/photo.php?u=https://uc.udn.com.tw/photo/2023/10/24/0/26469902.png&x=0&y=0&sw=0&sh=0&exp=3600&w=930" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://i.ytimg.com/vi/YgViWkyLi_0/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBM5D-rfjftghwsZ8tmqD-hmSFHyw" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

## 增加控制項

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

## 增加指示欄

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

# 導覽列
導覽列需要使用 .navbar 包裝，並透過 .navbar-expand{-sm|-md|-lg|-xl} 給予響應式的折疊以及使用 color scheme class。
導覽列預設的內容寬度是浮動的，更改 containers 以不同的方式來限制水平寬度。

使用 spacing 及 flex 通用類別來控制物件在導覽列的間隔及對齊。
導覽列預設是響應式的，但也可以輕易的修改這個選項。響應式行為會使用到折疊的 JavaScript 插件。

使用 \<nav> 元素確保親和性，或者如果使用更通用的元素，如 \<div>，在每一個導覽列中添加 role="navigation" 為輔助技術的使用者明確標識導覽區域。
透過設置 aria-current="page" 於當前頁面，或將 aria-current="true" 設置於群組中的當前項目來指示目前位置。

導覽列內建對一些對子元件的支援。根據需求可從以下選項中進行選擇：

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

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

# 讀取圖示

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

## 顔色

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

# 分頁
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

## 使用icons代替文字

<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

## 禁用和啟用狀態
分頁可針對不同的情況進行客製。使用 .disabled 來顯示禁用狀態、 .active 顯示當前頁數。

雖然 .disabled 這個 class 使用了 pointer-events: none 來 嘗試 禁用 a 連結功能，這個屬性在 CSS 還是未標準化的，因為鍵盤導覽仍不受影響。因此，您應該在禁用的連結增加 tabindex="-1" ，並使用自定義的 JavaScript 來完全的禁用它。
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>