19.1 按鈕標簽
.btn類設計用于button元素。但是，您也可以在a或input元素上使用這些類。下面是幾個例子及效果，從外觀上來看幾乎沒什么區別。一般情況下，按鈕要設置顏色，否則不容易分辨。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>按鈕組件</title>
</head>
<body>
<div class="container">
<br><br><br>
<a class="btn btn-primary" href="#" role="button">鏈接按鈕</a>
<button class="btn btn-primary" type="submit">Button按鈕</button>
<input class="btn btn-primary" type="button" value="Input Button按鈕">
<input class="btn btn-primary" type="submit" value="Submit 按鈕">
<input class="btn btn-primary" type="reset" value="Reset 按鈕">
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼19.2 按鈕的顏色
按鈕的顏色設置非常簡單，和前面的顏色都是通用的，只是前綴改成了bt-，另外還有種鏈接樣式，如下例子
<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>
復制代碼19.3 禁止文字換行
一般來說，按鈕是長度可變的，文字不會換行，但當上級容器設置了寬度且寬度不滿足按鈕長度的時候，按鈕文本會自動換行，如果不希望按鈕文本換行，可以將 .text-nowrap類添加到按鈕。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>按鈕組件</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<button class="btn btn-primary" type="submit">你見過我這么長的按鈕嗎？</button>
<button class="btn btn-primary" type="submit">你見過我這么長的按鈕嗎？</button>
</div>
<div class="col-3">
<button class="btn btn-primary text-nowrap" type="submit">你見過我這么長的按鈕嗎？</button>
<button class="btn btn-primary text-nowrap" type="submit">你見過我這么長的按鈕嗎？</button>
</div>
<div class="col-3">
<button class="btn btn-primary" type="submit">你見過我這么長的按鈕嗎？</button>
<button class="btn btn-primary" type="submit">你見過我這么長的按鈕嗎？</button>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼從這個例子中我們可以看出三點
- 按鈕組件是響應式的，一行放不開會自動換行。
- 按鈕組件只有左右間隙，沒有上下間隙
- 使用text-nowrap后，按鈕會強制溢出上級容器的寬度設置，所以使用一定要慎重。
19.4 外邊框按鈕
需要一個按鈕，卻不需要它們帶來的厚重背景色？將默認修飾符類替換為.btn-outline-*類，以刪除任何按鈕上的所有背景圖像和顏色。
<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>
復制代碼19.5 大小設置
喜歡大的還是小的按鈕？添加.btn-lg 或者 .btn-sm以獲得其他尺寸。
<button class="btn btn-primary btn-sm" type="submit">btn-sm Button</button>
<button class="btn btn-primary" type="submit">Button</button>
<button class="btn btn-primary btn-lg" type="submit">btn-lg Button</button>
復制代碼19.6 禁用狀態
通過向任何button元素添加disabled屬性，使按鈕看起來不起作用。
使用a元素禁用的按鈕的行為有些不同：
- a不支持disabled屬性，因此必須添加.disabled類以使其在視覺上顯示為禁用。
- 禁用的按鈕應該包含 aria-disabled="true" 屬性，以指示輔助技術的元素狀態。
<button type="button" class="btn btn-lg btn-primary" disabled>禁用button</button>
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">禁用 a 按鈕</a>
復制代碼可能不細心地朋友看不出來，button的disabled是加在class外面的，是html屬性。a是加在class內的，是css樣式類。tabindex="-1"是禁止通過鍵盤激活鏈接，aria-disabled="true"是指示輔助技術的元素狀態（比如盲文閱讀器）。
19.7 區塊按鈕
19.7.1 全寬按鈕
混合使用display和gap通用類別，建立跟Bootstrap 4一樣的響應式、滿版的的內存塊級別按鈕堆疊。透過使用通用類別而非指定button class，你可以更好的控制間距、對齊以及響應式等行為。
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
復制代碼19.7.2 半寬按鈕
可以使用網格系統的欄（column）類別來調整內存塊級別按鈕的寬度。舉例來說，可以用.col-6建立寬度50%的內存塊級別按鈕，再用.mx-auto將其水平置中。當然，你可以將col-6中的6改為1-12，得到不同寬度的按鈕。
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
復制代碼19.7.3 響應式按鈕
以下為一個響應式的示例，從垂直堆疊的按鈕群組開始，直到遇到md斷點才會把.d-grid替換為.d-md-block，進而使gap-2通用類別無效化。你可以縮放瀏覽器的大小以觀察它們的改變，我這里就不演示了。
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
復制代碼19.8 按鈕水平對齊
方向為水平時，可以添加彈性盒子通用類別來對齊、調整按鈕。以下使其在非堆疊的情況下對齊右邊。
<div class="d-flex justify-content-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
復制代碼19.9 js切換按鈕狀態
19.9.1 顯示效果
加入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>
<br><br><br>
<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>
復制代碼從效果來看，激活的按鈕顏色更深一些。
19.9.2 js控制
可以使用按鈕構造函數創建按鈕實例，例如：
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
復制代碼方法
- toggle 切換推送狀態。使按鈕看起來已被激活。
- dispose 銷毀元素的按鈕。（刪除DOM元素上存儲的數據）
例如，切換所有按鈕
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
復制代碼有興趣的朋友可以自己完善代碼試驗一下。
今天的課程就到這里，請關注我，及時學習 俺老劉原創的《Bootstrap5零基礎到精通》第20節 Bootstrap5按鈕組Button group組件用法，從字面也可以看出，按鈕組就是多個按鈕的組合。