本章將通過實(shí)例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會(huì)繼承圓角灰色按鈕的默認(rèn)外觀。但是 Bootstrap 提供了一些選項(xiàng)來定義按鈕的樣式，具體如下表所示：

以下樣式可用于<a>, <button>, 或 <input> 元素上：

下面的實(shí)例演示了上面所有的按鈕 class：

結(jié)果如下所示：

按鈕大小

下表列出了獲得各種大小按鈕的 class：

下面的實(shí)例演示了上面所有的按鈕 class：

結(jié)果如下所示：

按鈕狀態(tài)

Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class，下面將進(jìn)行詳細(xì)講解。

激活狀態(tài)

按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈激活狀態(tài)的 class：

下面的實(shí)例演示了這點(diǎn)：

結(jié)果如下所示：

禁用狀態(tài)

當(dāng)您禁用一個(gè)按鈕時(shí)，它的顏色會(huì)變淡 50%，并失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態(tài)的 class：

下面的實(shí)例演示了這點(diǎn)：

結(jié)果如下所示：

按鈕標(biāo)簽

您可以在 <a>、<button> 或 <input> 元素上使用按鈕 class。但是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。

下面的實(shí)例演示了這點(diǎn)：

結(jié)果如下所示：

按鈕組

在 div 中直接使用 .btn-group 可以創(chuàng)建按鈕組：

使用 .btn-group-lg|sm|xs 來控制按鈕組的大?。?

如果要設(shè)置垂直方向的按鈕可以通過 .btn-group-vertical 類來設(shè)置：

自適應(yīng)大小的按鈕組

可以通過 .btn-group-justified 類來設(shè)置自適應(yīng)大小的按鈕組。

以下實(shí)例使用 a 標(biāo)簽來展示：

注意: 如果是 <button> 元素, 你需要在外層使用 .btn-group 類來包裹:

內(nèi)嵌下拉菜單的按鈕組

按鈕組內(nèi)嵌的按鈕可以設(shè)置下拉菜單，如下實(shí)例：

分割按鈕