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>
復制代碼

7.1.png

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>
復制代碼

7.2.png

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組件用法，從字面也可以看出，按鈕組就是多個按鈕的組合。

第19節 Bootstrap5按鈕Buttons組件用法