Bootstrap 教程
Bootstrap 按鈕
本章節(jié)將通過(guò)實(shí)例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會(huì)繼承圓角灰色按鈕的默認(rèn)外觀。但是 Bootstrap 提供了一些選項(xiàng)來(lái)定義按鈕的樣式，具體如下表所示：
以下樣式可用于<a>, <button>, 或 <input> 元素上：
| 類(lèi) | 描述 | 實(shí)例 |
|---|---|---|
| .btn | 為按鈕添加基本樣式 | 運(yùn)行代碼 |
| .btn-default | 默認(rèn)/標(biāo)準(zhǔn)按鈕 | 運(yùn)行代碼 |
| .btn-primary | 原始按鈕樣式（未被操作） | 運(yùn)行代碼 |
| .btn-success | 表示成功的動(dòng)作 | 運(yùn)行代碼 |
| .btn-info | 該樣式可用于要彈出信息的按鈕 | 運(yùn)行代碼 |
| .btn-warning | 表示需要謹(jǐn)慎操作的按鈕 | 運(yùn)行代碼 |
| .btn-danger | 表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作 | 運(yùn)行代碼 |
| .btn-link | 讓按鈕看起來(lái)像個(gè)鏈接 (仍然保留按鈕行為) | 運(yùn)行代碼 |
| .btn-lg | 制作一個(gè)大按鈕 | 運(yùn)行代碼 |
| .btn-sm | 制作一個(gè)小按鈕 | 運(yùn)行代碼 |
| .btn-xs | 制作一個(gè)超小按鈕 | 運(yùn)行代碼 |
| .btn-block | 塊級(jí)按鈕(拉伸至父元素100%的寬度) | 運(yùn)行代碼 |
| .active | 按鈕被點(diǎn)擊 | 運(yùn)行代碼 |
| .disabled | 禁用按鈕 | 運(yùn)行代碼 |
下面的實(shí)例演示了上面所有的按鈕 class：
實(shí)例
<!-- 標(biāo)準(zhǔn)的按鈕 -->
<button type="button" class="btn btn-default">默認(rèn)按鈕</button>
<!-- 提供額外的視覺(jué)效果，標(biāo)識(shí)一組按鈕中的原始動(dòng)作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個(gè)成功的或積極的動(dòng)作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應(yīng)謹(jǐn)慎采取的動(dòng)作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作 -->
<button type="button" class="btn btn-danger">危險(xiǎn)按鈕</button>
<!-- 并不強(qiáng)調(diào)是一個(gè)按鈕，看起來(lái)像一個(gè)鏈接，但同時(shí)保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>
運(yùn)行代碼 ?
結(jié)果如下所示：
按鈕大小
下表列出了獲得各種大小按鈕的 class：
| Class | 描述 |
|---|---|
| .btn-lg | 這會(huì)讓按鈕看起來(lái)比較大。 |
| .btn-sm | 這會(huì)讓按鈕看起來(lái)比較小。 |
| .btn-xs | 這會(huì)讓按鈕看起來(lái)特別小。 |
| .btn-block | 這會(huì)創(chuàng)建塊級(jí)的按鈕，會(huì)橫跨父元素的全部寬度。 |
下面的實(shí)例演示了上面所有的按鈕 class：
實(shí)例
<p>
<button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button>
<button type="button" class="btn btn-default btn-lg">大的按鈕</button>
</p>
<p>
<button type="button" class="btn btn-primary">默認(rèn)大小的原始按鈕</button>
<button type="button" class="btn btn-default">默認(rèn)大小的按鈕</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">小的原始按鈕</button>
<button type="button" class="btn btn-default btn-sm">小的按鈕</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">特別小的原始按鈕</button>
<button type="button" class="btn btn-default btn-xs">特別小的按鈕</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">塊級(jí)的原始按鈕</button>
<button type="button" class="btn btn-default btn-lg btn-block">塊級(jí)的按鈕</button>
</p>
運(yùn)行代碼 ?
結(jié)果如下所示：
按鈕狀態(tài)
Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class，下面將進(jìn)行詳細(xì)講解。
激活狀態(tài)
按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。
下表列出了讓按鈕元素和錨元素呈激活狀態(tài)的 class：
| 元素 | Class |
|---|---|
| 按鈕元素 | 添加 .active class 來(lái)顯示它是激活的。 |
| 錨元素 | 添加 .active class 到 <a> 按鈕來(lái)顯示它是激活的。 |
下面的實(shí)例演示了這點(diǎn)：
實(shí)例
<p>
<button type="button" class="btn btn-default btn-lg ">默認(rèn)按鈕</button>
<button type="button" class="btn btn-default btn-lg active">激活按鈕</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
<button type="button" class="btn btn-primary btn-lg active">激活的原始按鈕</button>
</p>
運(yùn)行代碼 ?
結(jié)果如下所示：
禁用狀態(tài)
當(dāng)您禁用一個(gè)按鈕時(shí)，它的顏色會(huì)變淡 50%，并失去漸變。
下表列出了讓按鈕元素和錨元素呈禁用狀態(tài)的 class：
| 元素 | Class |
|---|---|
| 按鈕元素 | 添加 disabled 屬性 到 <button> 按鈕。 |
| 錨元素 | 添加 disabled class 到 <a> 按鈕。 注意：該 class 只會(huì)改變 <a> 的外觀，不會(huì)改變它的功能。在這里，您需要使用自定義的 JavaScript 來(lái)禁用鏈接。 |
下面的實(shí)例演示了這點(diǎn)：
實(shí)例
<p>
<button type="button" class="btn btn-default btn-lg">默認(rèn)按鈕</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>
<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>
運(yùn)行代碼 ?
結(jié)果如下所示：
按鈕標(biāo)簽
您可以在 <a>、<button> 或 <input> 元素上使用按鈕 class。但是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問(wèn)題。
下面的實(shí)例演示了這點(diǎn)：
實(shí)例
<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="提交">
運(yùn)行代碼 ?
結(jié)果如下所示：
按鈕組
在 div 中直接使用 .btn-group 可以創(chuàng)建按鈕組：
實(shí)例
<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>
運(yùn)行代碼 ?
使用 .btn-group-lg|sm|xs 來(lái)控制按鈕組的大小：
實(shí)例
<div class="btn-group btn-group-lg">
<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>
運(yùn)行代碼 ?
如果要設(shè)置垂直方向的按鈕可以通過(guò) .btn-group-vertical 類(lèi)來(lái)設(shè)置：
實(shí)例
<div class="btn-group-vertical">
<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>
運(yùn)行代碼 ?
自適應(yīng)大小的按鈕組
可以通過(guò) .btn-group-justified 類(lèi)來(lái)設(shè)置自適應(yīng)大小的按鈕組。
以下實(shí)例使用 a 標(biāo)簽來(lái)展示：
實(shí)例
<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>
運(yùn)行代碼 ?
注意: 如果是 <button> 元素, 你需要在外層使用 .btn-group 類(lèi)來(lái)包裹:
實(shí)例
<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>
運(yùn)行代碼 ?
內(nèi)嵌下拉菜單的按鈕組
按鈕組內(nèi)嵌的按鈕可以設(shè)置下拉菜單，如下實(shí)例：
實(shí)例
<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>
運(yùn)行代碼 ?
分割按鈕
實(shí)例
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<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>
運(yùn)行代碼 ?