示例

Bootstrap 包含幾種預(yù)定義的按鈕樣式，每種都有其自己的語義目的，還有一些額外的功能用于更多的控制。

<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>

將意義傳遞給輔助技術(shù)

使用顏色來增加意義只能提供一種視覺指示，而不會(huì)傳達(dá)給輔助技術(shù)的用戶 - 如屏幕閱讀器。確保由顏色表示的信息或者來自內(nèi)容本身（例如可見文本），或者通過其他方式包含，例如隱藏在.sr-only類中的其他文本。

按鈕標(biāo)簽

這些.btn類被設(shè)計(jì)為與<button>元素一起使用。但是，您也可以使用這些類<a>或<input>元素（盡管有些瀏覽器可以應(yīng)用稍有不同的渲染）。

當(dāng)在用于觸發(fā)頁內(nèi)功能的<a>元素（如折疊內(nèi)容）上使用按鈕類時(shí)，而不是鏈接到當(dāng)前頁面中的新頁面或部分，應(yīng)該給這些鏈接role="button"以適當(dāng)?shù)貙⑵淠康膫鬟_(dá)給輔助技術(shù)，例如屏幕閱讀器。

<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">

大綱按鈕

需要一個(gè)按鈕，但不是他們帶來的巨大背景顏色？用.btn-outline-*替換默認(rèn)的修飾符類任何按鈕上的所有背景圖片和顏色。

<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創(chuàng)建塊級(jí)別按鈕 —— 即跨越父級(jí)的全部寬度的按鈕。

<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>

活動(dòng)狀態(tài)

活動(dòng)時(shí)，按鈕將顯示為按下（背景較暗，邊框較暗并且插入陰影）。不需要為 <button>** 添加類，因?yàn)樗鼈兪褂脗晤?*。但是，如果需要以編程方式復(fù)制狀態(tài)，則仍然可以強(qiáng)制使用帶有.active相同的活動(dòng)外觀（并包含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>

禁用狀態(tài)

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

<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>元素的禁用按鈕的行為有點(diǎn)不同：

• <a>不支持disabled屬性，因此您必須添加.disabled類以使其在視覺上顯示為禁用。

• 包括一些對(duì)未來友好的樣式以禁用所有pointer-events錨定按鈕。在支持該屬性的瀏覽器中，根本看不到禁用的游標(biāo)。

• 禁用的按鈕應(yīng)該包含aria-disabled="true"屬性以指示元素對(duì)輔助技術(shù)的狀態(tài)。

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

鏈接功能警告

.disabled類使用pointer-events: none嘗試禁用的鏈路功能<a>，但 CSS 屬性尚不規(guī)范。此外，即使在支持的瀏覽器中pointer-events: none，鍵盤導(dǎo)航也不會(huì)受到影響，這意味著有遠(yuǎn)見的鍵盤用戶和輔助技術(shù)用戶仍然可以激活這些鏈接。所以為了安全起見，在這些鏈接上添加一個(gè)tabindex="-1"屬性（以防止它們接收鍵盤焦點(diǎn)）并使用自定義 JavaScript 來禁用它們的功能。

按鈕插件

用按鈕做更多?？刂瓢粹o為更多組件（如工具欄）指定或創(chuàng)建按鈕組。

切換狀態(tài)

添加data-toggle="button"切換按鈕的active狀態(tài)。如果您預(yù)先切換按鈕，則必須手動(dòng)添加.active類并將 aria-pressed="true"其添加到<button>。

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

復(fù)選框和單選按鈕

引導(dǎo)程序的.button樣式可以應(yīng)用于其他元素，如<label>s，以提供復(fù)選框或無線電樣式按鈕切換。添加data-toggle="buttons"到.btn-group包含這些修改后的按鈕以啟用其各自樣式的切換。

這些按鈕的選中狀態(tài)為只更新click事件在按鈕上。如果使用另一種方法更新輸入-e。g.<input type="reset">或者手動(dòng)應(yīng)用輸入checked屬性-您需要切換.active在<label>手動(dòng)。

注意，預(yù)先選中的按鈕要求您手動(dòng)添加.active類初始化到輸入的<label>...

<div class="btn-group" data-toggle="buttons">  <label class="btn btn-secondary active">    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)  </label>  <label class="btn btn-secondary">    <input type="checkbox" autocomplete="off"> Checkbox 2  </label>  <label class="btn btn-secondary">    <input type="checkbox" autocomplete="off"> Checkbox 3  </label></div>

<div class="btn-group" data-toggle="buttons">  <label class="btn btn-secondary active">    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)  </label>  <label class="btn btn-secondary">    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2  </label>  <label class="btn btn-secondary">    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3  </label></div>

方法