任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。但是 Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示：

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

• .btn：為按鈕添加基本樣式
• .btn-default：默認/標準按鈕

<button type="button" class="btn btn-default"> 默認按鈕 </button>

• .btn-primary：原始按鈕樣式（未被操作）

<button type="button" class="btn btn-primary"> 原始按鈕 </button>

• .btn-success：表示成功的動作

<button type="button" class="btn btn-success"> 成功按鈕 </button>

• .btn-info：該樣式可用于要彈出信息的按鈕

<button type="button" class="btn btn-info"> 信息按鈕 </button>

• .btn-warning：表示需要謹慎操作的按鈕

<button type="button" class="btn btn-warning"> 警告按鈕 </button>

• .btn-danger：表示一個危險動作的按鈕操作

<button type="button" class="btn btn-danger"> 危險按鈕 </button>

• .btn-link：讓按鈕看起來像個鏈接 (仍然保留按鈕行為)

<button type="button" class="btn btn-link"> 鏈接按鈕 </button>

• .btn-lg：制作一個大按鈕
• .btn-sm：制作一個小按鈕
• .btn-xs：制作一個超小按鈕
• .btn-block：塊級按鈕(拉伸至父元素100%的寬度)
• .active：按鈕被點擊
• .disabled：禁用按鈕

按鈕大小

• .btn-lg：制作一個大按鈕

<button type="button" class="btn btn-primary btn-lg"> 大的原始按鈕 </button> <button type="button" class="btn btn-default btn-lg"> 大的按鈕 </button>

• .btn-sm：制作一個小按鈕

<button type="button" class="btn btn-primary btn-sm">小的原始按鈕</button> <button type="button" class="btn btn-default btn-sm">小的按鈕</button>

• .btn-xs：制作一個超小按鈕

<button type="button" class="btn btn-primary btn-xs">特別小的原始按鈕</button> <button type="button" class="btn btn-default btn-xs">特別小的按鈕</button>

• .btn-block：塊級按鈕(拉伸至父元素100%的寬度)

<button type="button" class="btn btn-primary btn-lg btn-block">塊級的原始按鈕</button> <button type="button" class="btn btn-default btn-lg btn-block">塊級的按鈕</button>

按鈕狀態(tài)

Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class

（1）激活狀態(tài)

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

• 按鈕元素：添加 .active class 來顯示它是激活的

<button type="button" class="btn btn-default btn-lg "> 默認按鈕 </button> <button type="button" class="btn btn-default btn-lg active"> 激活按鈕 </button>

• 錨元素：添加 .active class 到 按鈕來顯示它是激活的

<button type="button" class="btn btn-primary btn-lg "> 原始按鈕 </button> <button type="button" class="btn btn-primary btn-lg active"> 激活的原始按鈕 </button>

（2）禁用狀態(tài)

當你禁用一個按鈕時，它的顏色會變淡 50%，并失去漸變。

• 按鈕元素：添加 disabled 屬性 到 <button> 按鈕

<p><button type="button" class="btn btn-default btn-lg">默認按鈕</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕</button> </p> <p><button type="button" class="btn btn-primary btn-lg ">原始按鈕</button><button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按鈕</button> </p>

• 錨元素：添加 disabled class 到 <a> 按鈕

<p><a href="#" class="btn btn-default btn-lg" role="button">鏈接</a><a href="#" class="btn btn-default btn-lg disabled" role="button">禁用鏈接</a> </p> <p><a href="#" class="btn btn-primary btn-lg" role="button">原始鏈接</a><a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始鏈接</a> </p>

按鈕標簽

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

實例

<a class="btn btn-default" href="#" role="button">鏈接</a> <button class="btn btn-default" type="submit">按鈕</button> <input class="btn btn-default" type="button" value="輸入"> <input class="btn btn-default" type="submit" value="提交">

（1）按鈕組

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

<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button> </div>

（2）自適應大小的按鈕組

可以通過 .btn-group-justified 類來設置自適應大小的按鈕組。

<div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">Apple</a><a href="#" class="btn btn-primary">Samsung</a><a href="#" class="btn btn-primary">Sony</a> </div>

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

<div class="btn-group btn-group-justified"><div class="btn-group"><button type="button" class="btn btn-primary">Apple</button></div><div class="btn-group"><button type="button" class="btn btn-primary">Samsung</button></div><div class="btn-group"><button type="button" class="btn btn-primary">Sony</button></div> </div>

（3）內嵌下拉菜單的按鈕組

按鈕組內嵌的按鈕可以設置下拉菜單

<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><div class="btn-group"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony <span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">Tablet</a></li><li><a href="#">Smartphone</a></li></ul></div> </div>

總結

以上是生活随笔為你收集整理的Bootstrap 按钮的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。