可作為按鈕使用的標(biāo)簽或元素

為 <a>、<button> 或 <input> 元素添加按鈕類（button class）即可使用 Bootstrap 提供的樣式。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

針對組件的注意事項(xiàng)

雖然按鈕類可以應(yīng)用到<a>和 <button> 元素上，但是，導(dǎo)航和導(dǎo)航條組件只支持 <button> 元素。

鏈接被作為按鈕使用時(shí)的注意事項(xiàng)

如果 <a>元素被作為按鈕使用 -- 并用于在當(dāng)前頁面觸發(fā)某些功能 -- 而不是用于鏈接其他頁面或鏈接當(dāng)前頁面中的其他部分，那么，務(wù)必為其設(shè)置 role="button" 屬性。

跨瀏覽器展現(xiàn)

我們總結(jié)的最佳實(shí)踐是：強(qiáng)烈建議盡可能使用 <button> 元素來獲得在各個(gè)瀏覽器上獲得相匹配的繪制效果。

另外，我們還發(fā)現(xiàn)了 Firefox <30 版本的瀏覽器上出現(xiàn)的一個(gè) bug，其表現(xiàn)是：阻止我們?yōu)榛?<input> 元素所創(chuàng)建的按鈕設(shè)置 line-height 屬性，這就導(dǎo)致在 Firefox 瀏覽器上不能完全和其他按鈕保持一致的高度。

預(yù)定義樣式

使用下面列出的類可以快速創(chuàng)建一個(gè)帶有預(yù)定義樣式的按鈕。

    <!-- Standard button -->
    <button type="button" class="btn btn-default">（默認(rèn)樣式）Default</button>

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">（首選項(xiàng)）Primary</button>

    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">（成功）Success</button>

    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">（一般信息）Info</button>

    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">（警告）Warning</button>

    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">（危險(xiǎn)）Danger</button>

    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">（鏈接）Link</button>

為按鈕添加不同的顏色只是一種視覺上的信息表達(dá)方式，但是，對于使用輔助技術(shù) -- 例如屏幕閱讀器 -- 的用戶來說，顏色是不可見的。建議，確保通過顏色表達(dá)的信息或者通過內(nèi)容自身表達(dá)出來（按鈕上的文字），或者通過其他方式 -- 例如通過 .sr-only 類隱藏的額外文本 -- 表達(dá)出來。

尺寸

需要讓按鈕具有不同尺寸嗎？使用 .btn-lg、.btn-sm 或 .btn-xs就可以獲得不同尺寸的按鈕。

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默認(rèn)尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默認(rèn)尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

通過給按鈕添加 .btn-block 類可以將其拉伸至父元素 100% 的寬度，而且按鈕也變?yōu)榱藟K級（block）元素。

<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（塊級元素）Block level button</button>

激活狀態(tài)

當(dāng)按鈕處于激活狀態(tài)時(shí)，其表現(xiàn)為被按壓下去（底色更深、邊框夜色更深、向內(nèi)投射陰影）。對于 <button> 元素，是通過:active 狀態(tài)實(shí)現(xiàn)的。對于 <a> 元素，是通過 .active 類實(shí)現(xiàn)的。然而，你還可以將 .active 應(yīng)用到 <button> 上（包含 aria-pressed="true"屬性)），并通過編程的方式使其處于激活狀態(tài)。

button 元素

由于 :active 是偽狀態(tài)，因此無需額外添加，但是在需要讓其表現(xiàn)出同樣外觀的時(shí)候可以添加 .active 類。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

鏈接（<a>）元素

可以為基于<a>元素創(chuàng)建的按鈕添加 .active 類。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用狀態(tài)

通過為按鈕的背景設(shè)置 opacity 屬性就可以呈現(xiàn)出無法點(diǎn)擊的效果。

button 元素

為 <button> 元素添加 disabled 屬性，使其表現(xiàn)出禁用狀態(tài)。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

跨瀏覽器兼容性

如果為 <button> 元素添加 disabled 屬性，Internet Explorer 9 及更低版本的瀏覽器將會把按鈕中的文本繪制為灰色，并帶有惡心的陰影，目前我們還沒有解決辦法。

鏈接（<a>）元素

為基于 <a> 元素創(chuàng)建的按鈕添加 .disabled類。

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

我們把 .disabled作為工具類使用，就像.active 類一樣，因此不需要增加前綴。

鏈接的原始功能不受影響

上面提到的類只是通過設(shè)置 pointer-events: none 來禁止<a> 元素作為鏈接的原始功能，但是，這一 CSS 屬性并沒有被標(biāo)準(zhǔn)化，并且 Opera 18 及更低版本的瀏覽器并沒有完全支持這一屬性，同樣，Internet Explorer 11 也不支持。此外，有的瀏覽器設(shè)置了 pointer-events: none, 鍵盤導(dǎo)航仍然不受影響。因此，為了安全起見，建議通過 JavaScript 代碼來禁止鏈接的原始功能。