Source

鈕扣

將 Bootstrap 的自定義按鈕樣式用於表單、對話框等中的操作，並支持多種尺寸、狀態等。

例子

Bootstrap 包含幾個預定義的按鈕樣式，每個樣式都有自己的語義用途，並添加了一些附加功能以進行更多控制。

<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>
向輔助技術傳達意義

使用顏色來添加含義僅提供視覺指示，不會傳達給輔助技術的用戶 - 例如屏幕閱讀器。確保由顏色表示的信息在內容本身（例如可見文本）中是顯而易見的，或者通過替代方式包含在內，例如隱藏在.sr-only類中的附加文本。

按鈕標籤

這些.btn類被設計為與<button>元素一起使用。但是，您也可以在<a>或<input>元素上使用這些類（儘管某些瀏覽器可能會應用稍微不同的渲染）。

當在用於觸發頁面內功能（如折疊內容）的元素上使用按鈕類時<a>，而不是鏈接到當前頁面中的新頁面或部分時，應給予這些鏈接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">

大綱按鈕

需要一個按鈕，但不需要它們帶來的大量背景顏色？將默認修飾符類替換.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>

尺寸

喜歡更大或更小的按鈕？添加.btn-lg或.btn-sm用於其他尺寸。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

通過添加.btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

活動狀態

激活時，按鈕將顯示為按下狀態（背景較暗、邊框較暗和嵌入陰影）。無需向<button>s 添加類，因為它們使用偽類。但是，如果您需要以編程方式複制狀態，您仍然可以強制使用.active（並包含屬性）相同的活動外觀。aria-pressed="true"

主鏈接 關聯 
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

禁用狀態

通過將disabled布爾屬性添加到任何<button>元素，使按鈕看起來不活動。

<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>s 不支持該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>

該類.disabled用於pointer-events: none嘗試禁用<a>s 的鏈接功能，但該 CSS 屬性尚未標準化。此外，即使在支持 的瀏覽器中pointer-events: none，鍵盤導航也不受影響，這意味著有視力的鍵盤用戶和輔助技術用戶仍然能夠激活這些鏈接。所以為了安全起見，tabindex="-1"在這些鏈接上添加一個屬性（以防止它們接收鍵盤焦點）並使用自定義 JavaScript 來禁用它們的功能。

按鈕插件

用按鈕做更多事情。控制按鈕狀態或為更多組件（如工具欄）創建按鈕組。

切換狀態

添加data-toggle="button"以切換按鈕的active狀態。如果您要預先切換按鈕，則必須手動將.active類添加到 .aria-pressed="true"<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

複選框和單選按鈕

Bootstrap 的.button樣式可以應用於其他元素，例如<label>s，以提供複選框或單選樣式按鈕切換。添加data-toggle="buttons"到.btn-group包含那些修改過的按鈕以通過 JavaScript 啟用它們的切換行為並添加以設置按鈕中的 s.btn-group-toggle樣式。請注意，您可以創建單個輸入供電的按鈕或它們的組。<input>

這些按鈕的選中狀態僅通過按鈕上的事件更新click。如果您使用另一種方​​法來更新輸入——例如，使用<input type="reset">或通過手動應用輸入的checked屬性——您將需要手動切換.active。<label>

請注意，預先選中的按鈕需要您手動將.active類添加到輸入的<label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

方法

方法 描述
$().button('toggle') 切換推送狀態。使按鈕具有已激活的外觀。
$().button('dispose') 銷毀元素的按鈕。