Bootstrap 按鈕（Button）插件
按鈕（Button）在Bootstrap按鈕一章中介紹過。 通過按鈕（Button）插件，您可以添加進一些交互，比如控制按鈕狀態，或者為其他組件（如工具欄）創建按鈕組。
如果您想要單獨引用該插件的功能，那麼您需要引用button.js 。 或者，正如Bootstrap插件概覽一章中所提到，您可以引用bootstrap.js或壓縮版的bootstrap.min.js 。
加載狀態
如需向按鈕添加加載狀態，只需要簡單地向button元素添加data-loading-text="Loading..."作為其屬性即可，如下面實例所示：
實例
< button id = " fat-btn " class = " btn btn-primary " data-loading-text = " Loading... "
type = " button " > 加載狀態 </ button >
< script > $(function() { $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { // $( this).button('reset'); }); }); }); </ script >
嘗試一下»
結果如下所示：
單個切換
如需激活單個按鈕的切換（即改變按鈕的正常狀態為按壓狀態，反之亦然），只需向button元素添加data-toggle="button"作為其屬性即可，如下面實例所示：
實例
< button type = " button " class = " btn btn-primary "
data-toggle = " button " > 單個切換 </ button >
嘗試一下»
結果如下所示：
複選框（Checkbox）
您可以創建複選框組，並通過向btn-group添加data屬性data-toggle="buttons"來添加複選框組的切換。
實例
< div class = " btn-group " data-toggle = " buttons " >
< label class = " btn btn-primary " >
< input type = " checkbox " > 選項1 </ label >
< label class = " btn btn-primary " >
< input type = " checkbox " > 選項2 </ label >
< label class = " btn btn-primary " >
< input type = " checkbox " > 選項3 </ label >
</ div >
嘗試一下»
結果如下所示：
單選按鈕（Radio）
類似地，您可以創建單選按鈕組，並通過向btn-group添加data屬性data-toggle="buttons"來添加單選按鈕組的切換。
實例
< div class = " btn-group " data-toggle = " buttons " >
< label class = " btn btn-primary " >
< input type = " radio " name = " options " id = " option1 " > 選項1 </ label >
< label class = " btn btn-primary " >
< input type = " radio " name = " options " id = " option2 " > 選項2 </ label >
< label class = " btn btn-primary " >
< input type = " radio " name = " options " id = " option3 " > 選項3 </ label >
</ div >
嘗試一下»
結果如下所示：
用法
您可以通過JavaScript啟用按鈕（Button）插件，如下所示：
$('.btn').button()
選項
沒有選項。
方法
下面是一些按鈕（Button）插件中有用的方法：
| 方法 | 描述 | 实例 |
|---|---|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
實例
下面的實例演示了上面方法的用法：
實例
< h2 > 點擊每個按鈕查看方法效果 </ 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 " > 請點擊我 </ button >
< script >
$ ( 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 >
嘗試一下»
結果如下所示：
