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類中的附加文本。

禁用文本換行

如果您不希望按鈕文本換行,可以將.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>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">
  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> 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') 銷毀元素的按鈕。