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ī)、平板電腦、臺(tái)式電腦
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 多媒體對(duì)象（Media Object）
Bootstrap 分頁(yè)
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁(yè)面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁(yè)（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy）
Bootstrap 過(guò)渡效果（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 按鈕（Button）
按鈕（Button）在 Bootstrap 按鈕 一章中介紹過(guò)。通過(guò)按鈕（Button）插件，您可以添加進(jìn)一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 button.js?；蛘?，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
加載狀態(tài)
如需向按鈕添加加載狀態(tài)，只需要簡(jiǎn)單地向 button 元素添加 data-loading-text="Loading..." 作為其屬性即可，如下面實(shí)例所示：
<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?按鈕（Button）插件加載狀態(tài)</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button?id="fat-btn"?class="btn?btn-primary"?data-loading-text="Loading..."?
???type="button">?加載狀態(tài)
</button>
<script>
???$(function()?{?
??????$(".btn").click(function(){
?????????$(this).button('loading').delay(1000).queue(function()?{
???????????//?$(this).button('reset');
?????????});????????
??????});
???});??
</script>
</body>
</html>
結(jié)果如下所示：
單個(gè)切換
如需激活單個(gè)按鈕的切換（即改變按鈕的正常狀態(tài)為按壓狀態(tài)，反之亦然），只需向 button 元素添加 data-toggle="button" 作為其屬性即可，如下面實(shí)例所示：
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?按鈕（Button）插件單個(gè)切換</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <button?type="button"?class="btn?btn-primary"? ???data-toggle="button">?單個(gè)切換 </button> </body> </html>
結(jié)果如下所示：
復(fù)選框（Checkbox）
您可以創(chuàng)建復(fù)選框組，并通過(guò)向 btn-group 添加 data 屬性 data-toggle="buttons" 來(lái)添加復(fù)選框組的切換。
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?按鈕（Button）插件復(fù)選框</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div?class="btn-group"?data-toggle="buttons"> ???<label?class="btn?btn-primary"> ??????<input?type="checkbox">?選項(xiàng)?1 ???</label> ???<label?class="btn?btn-primary"> ??????<input?type="checkbox">?選項(xiàng)?2 ???</label> ???<label?class="btn?btn-primary"> ??????<input?type="checkbox">?選項(xiàng)?3 ???</label> </div> </body> </html>
結(jié)果如下所示：
單選按鈕（Radio）
類似地，您可以創(chuàng)建單選按鈕組，并通過(guò)向 btn-group 添加 data 屬性 data-toggle="buttons" 來(lái)添加單選按鈕組的切換。
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?按鈕（Button）插件單選按鈕</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div?class="btn-group"?data-toggle="buttons"> ???<label?class="btn?btn-primary"> ??????<input?type="radio"?name="options"?id="option1">?選項(xiàng)?1 ???</label> ???<label?class="btn?btn-primary"> ??????<input?type="radio"?name="options"?id="option2">?選項(xiàng)?2 ???</label> ???<label?class="btn?btn-primary"> ??????<input?type="radio"?name="options"?id="option3">?選項(xiàng)?3 ???</label> </div> </body> </html>
結(jié)果如下所示：
用法
您可以 通過(guò) JavaScript 啟用按鈕（Button）插件，如下所示：
$('.btn').button()
選項(xiàng)
沒有選項(xiàng)。
方法
下面是一些按鈕（Button）插件中有用的方法：
| 方法 | 描述 | 實(shí)例 |
|---|---|---|
| button('toggle') | 切換按壓狀態(tài)。賦予按鈕被激活的外觀。您可以使用 data-toggle 屬性啟用按鈕的自動(dòng)切換。 | $().button('toggle') |
| .button('loading') | 當(dāng)加載時(shí)，按鈕是禁用的，且文本變?yōu)?button 元素的 data-loading-text 屬性的值。 | $().button('loading') |
| .button('reset') | 重置按鈕狀態(tài)，文本內(nèi)容恢復(fù)為最初的內(nèi)容。當(dāng)您想要把按鈕返回為原始的狀態(tài)時(shí)，該方法非常有用。 | $().button('reset') |
| .button(string) | 該方法中的字符串是指由用戶聲明的任何字符串。使用該方法，重置按鈕狀態(tài)，并添加新的內(nèi)容。 | $().button(string) |
實(shí)例
下面的實(shí)例演示了上面方法的用法：
<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?按鈕（Button）插件方法</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<h2>點(diǎn)擊每個(gè)按鈕查看方法效果</h2>
<h4>演示?.button('toggle')?方法</h4>
<div?id="myButtons1"?class="bs-example">
???<button?type="button"?class="btn?btn-primary">原始</button>
</div>
<h4>演示?.button('loading')?方法</h4>
<div?id="myButtons2"?class="bs-example">
???<button?type="button"?class="btn?btn-primary"?
??????data-loading-text="Loading...">原始
???</button>
</div>
<h4>演示?.button('reset')?方法</h4>
<div?id="myButtons3"?class="bs-example">
???<button?type="button"?class="btn?btn-primary"?
??????data-loading-text="Loading...">原始
???</button>
</div>
<h4>演示?.button(string)?方法</h4>
<button?type="button"?class="btn?btn-primary"?id="myButton4"?
???data-complete-text="Loading?finished">請(qǐng)點(diǎn)擊我
</button>
<script?type="text/javascript">
???$(function?()?{
??????$("#myButtons1?.btn").click(function(){
?????????$(this).button('toggle');
??????});
???});
???$(function()?{?
??????$("#myButtons2?.btn").click(function(){
?????????$(this).button('loading').delay(1000).queue(function()?{
?????????});????????
??????});
???});???
???$(function()?{?
??????$("#myButtons3?.btn").click(function(){
?????????$(this).button('loading').delay(1000).queue(function()?{
????????????$(this).button('reset');
?????????});????????
??????});
???});??
???$(function()?{?
??????$("#myButton4").click(function(){
?????????$(this).button('loading').delay(1000).queue(function()?{
????????????$(this).button('complete');
?????????});????????
??????});
???});?
</script>?
</body>
</html>
結(jié)果如下所示：
