Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺式電腦
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實(shí)用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對象（Media Object）
Bootstrap 分頁
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 按鈕
本章將通過實(shí)例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認(rèn)外觀。但是 Bootstrap 提供了一些選項(xiàng)來定義按鈕的樣式，具體如下表所示：
以下樣式可用于<a>, <button>, 或 <input> 元素上：
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| .btn | 為按鈕添加基本樣式 | 實(shí)例 ? |
| .btn-default | 默認(rèn)/標(biāo)準(zhǔn)按鈕 | 實(shí)例 ? |
| .btn-primary | 原始按鈕樣式（未被操作） | 實(shí)例 ? |
| .btn-success | 表示成功的動(dòng)作 | 實(shí)例 ? |
| .btn-info | 該樣式可用于要彈出信息的按鈕 | 實(shí)例 ? |
| .btn-warning | 表示需要謹(jǐn)慎操作的按鈕 | 實(shí)例 ? |
| .btn-danger | 表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作 | 實(shí)例 ? |
| .btn-link | 讓按鈕看起來像個(gè)鏈接 (仍然保留按鈕行為) | 實(shí)例 ? |
| .btn-lg | 制作一個(gè)大按鈕 | 實(shí)例 ? |
| .btn-sm | 制作一個(gè)小按鈕 | 實(shí)例 ? |
| .btn-xs | 制作一個(gè)超小按鈕 | 實(shí)例 ? |
| .btn-block | 塊級按鈕(拉伸至父元素100%的寬度) | 實(shí)例 ? |
| .active | 按鈕被點(diǎn)擊 | 實(shí)例 ? |
| .disabled | 禁用按鈕 | 實(shí)例 ? |
下面的實(shí)例演示了上面所有的按鈕 class：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 按鈕選項(xiàng)</title> <link rel="stylesheet" > <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <!-- 標(biāo)準(zhǔn)的按鈕 --> <button type="button" class="btn btn-default">默認(rèn)按鈕</button> <!-- 提供額外的視覺效果，標(biāo)識一組按鈕中的原始動(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è)按鈕，看起來像一個(gè)鏈接，但同時(shí)保持按鈕的行為 --> <button type="button" class="btn btn-link">鏈接按鈕</button> </body> </html>
結(jié)果如下所示：
按鈕大小
下表列出了獲得各種大小按鈕的 class：
| Class | 描述 |
|---|---|
| .btn-lg | 這會讓按鈕看起來比較大。 |
| .btn-sm | 這會讓按鈕看起來比較小。 |
| .btn-xs | 這會讓按鈕看起來特別小。 |
| .btn-block | 這會創(chuàng)建塊級的按鈕，會橫跨父元素的全部寬度。 |
下面的實(shí)例演示了上面所有的按鈕 class：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 按鈕大小</title>
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<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">
塊級的原始按鈕
</button>
<button type="button" class="btn btn-default btn-lg btn-block">
塊級的按鈕
</button>
</p>
</body>
</html>
結(jié)果如下所示：
按鈕狀態(tài)
Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class，下面將進(jìn)行詳細(xì)講解。
激活狀態(tài)
按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。
下表列出了讓按鈕元素和錨元素呈激活狀態(tài)的 class：
| 元素 | Class |
|---|---|
| 按鈕元素 | 添加 .active class 來顯示它是激活的。 |
| 錨元素 | 添加 .active class 到 <a> 按鈕來顯示它是激活的。 |
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 按鈕激活狀態(tài)</title>
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
結(jié)果如下所示：
禁用狀態(tài)
當(dāng)您禁用一個(gè)按鈕時(shí)，它的顏色會變淡 50%，并失去漸變。
下表列出了讓按鈕元素和錨元素呈禁用狀態(tài)的 class：
| 元素 | Class |
|---|---|
| 按鈕元素 | 添加 disabled 屬性 到 <button> 按鈕。 |
| 錨元素 | 添加 disabled class 到 <a> 按鈕。 注意：該 class 只會改變 <a> 的外觀，不會改變它的功能。在這里，您需要使用自定義的 JavaScript 來禁用鏈接。 |
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 按鈕禁用狀態(tài)</title>
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
結(jié)果如下所示：
按鈕標(biāo)簽
您可以在 <a>、<button> 或 <input> 元素上使用按鈕 class。但是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 按鈕標(biāo)簽</title> <link rel="stylesheet" > <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <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="提交"> </body> </html>
結(jié)果如下所示：
