前言
有一天小華死了變成孤魂野鬼，祂跟閻羅王說：「 我死得好冤望啊，可不可以讓我繼續留在陽間報仇？ 」而閻羅王調了一下資料，發現祂這生做了很多善事後非常猶豫，不知道該把祂繼續留在陰間還帶到陽間，所以祂給了現在在看文章的你一台機器並說道：「 小華的命運由你掌控，上面有三個按鈕，按陰、按陽，就是不要⋯⋯按陰陽。 」
（ 圖片來源 ）
官方網站的 Buttons 頁面
基本按鈕
<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>
禁止文字換行
可以在按鈕加入 .text-nowrap 來禁止按鈕文字換行。
<button type="button" class="btn text-nowrap">欲繼續執行 請點擊此按鈕</button>
按鈕標籤
.btn 被設計成需要與 <button> 元素一起使用。但是您也可以在 <a> 或 <input> 元素上使用這些 Class （ 儘管有些瀏覽器可能會使用稍微不同的渲染 ）。
當在用於觸發頁面內功能（ 例如折疊內容 ），而不是連結到新頁面或當前頁面中某一部分的 <a> 元素上使用按鈕 class 時，這些連結應該被賦予 role="button" 以適當地傳達它們的目的到螢幕閱讀器等網頁親合性技術。
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Outline 按鈕樣式
用 .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>
尺寸
用 .btn-lg 來套用大尺寸。
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
用 .btn-sm 來套用小尺寸。
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</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>
使用 <a> 元素的禁用其行為與其他按鈕略有不同：
<a> 不支援 disabled 屬性，所以你必須添加 .disabled 使它在視覺上看起來被禁用，加入一些友善的樣式，以禁用游標上的所有 pointer-events ，禁用按鈕應包含 aria-disabled="true" 屬性來向輔助性技術指示元素的狀態。
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
切換狀態
加入 data-bs-toggle="button" 來切換按鈕的 active 狀態，如果想要預先切換按鈕狀態，則必須手動添加 .active 以及 aria-pressed="true" 以確保狀態有正確的傳達至輔助性技術。
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
