按鈕

使用 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 類別隱藏的附加文字。

停用文字換行

如果您不希望按鈕文字換行，您可以將 .text-nowrap 類別新增到按鈕。在 Sass 中，您可以設定 $btn-white-space: nowrap 來停用每個按鈕的文字換行。

按鈕標籤

.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> 中新增類別，因為它們使用偽類別。不過，如果您需要以程式化方式複製狀態，您仍然可以使用 .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> 不支援 disabled 屬性，因此您必須新增 .disabled 類別，才能讓它在視覺上看起來已停用。
包含了一些未來友善的樣式，以停用錨點按鈕上的所有 pointer-events。在支援該屬性的瀏覽器中，您完全看不到已停用的游標。
使用 <a> 的已停用按鈕應包含 aria-disabled="true" 屬性，以表示元素的狀態給輔助技術。
使用 <a> 的已停用按鈕不應包含 href 屬性。

主要連結連結

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

連結功能注意事項

為了涵蓋必須在已停用連結上保留 href 屬性的情況，.disabled 類別使用 pointer-events: none 來嘗試停用 <a> 的連結功能。請注意，此 CSS 屬性尚未針對 HTML 標準化，但所有現代瀏覽器都支援它。此外，即使在支援 pointer-events: none 的瀏覽器中，鍵盤導覽仍然不受影響，這表示有視力的鍵盤使用者和輔助技術使用者仍能啟動這些連結。因此，為了安全起見，除了 aria-disabled="true" 之外，還應在這些連結上包含 tabindex="-1" 屬性，以防止它們接收鍵盤焦點，並使用自訂 JavaScript 完全停用其功能。

主要連結連結

<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-toggle="button" 以切換按鈕的 active 狀態。如果您要預先切換按鈕，則必須手動將 .active 類別和 aria-pressed="true" 新增到 <button>。

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

核取方塊和單選按鈕

Bootstrap 的 .button 樣式可以套用至其他元素，例如 <label>，以提供核取方塊或無線按鈕樣式的按鈕切換。將 data-toggle="buttons" 新增到包含這些已修改按鈕的 .btn-group，以透過 JavaScript 啟用其切換行為，並新增 .btn-group-toggle 以設定按鈕內 <input> 的樣式。請注意，您可以建立單一輸入驅動的按鈕或其群組。

這些按鈕的已勾選狀態僅透過按鈕上的 click 事件更新。如果您使用其他方法更新輸入（例如，使用 <input type="reset"> 或手動套用輸入的 checked 屬性），您需要手動在 <label> 上切換 .active。

請注意，預先勾選的按鈕需要您手動將 .active 類別新增到輸入的 <label>。

已勾選

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

方法

方法	說明
`$().button('toggle')`	切換推動狀態。讓按鈕看起來像是已被啟動。
`$().button('dispose')`	銷毀元素的按鈕。