Bootstrap每天必學(xué)之按鈕（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í)例所示：
<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>
二、單個(gè)切換
如需激活單個(gè)按鈕的切換（即改變按鈕的正常狀態(tài)為按壓狀態(tài)，反之亦然），只需向 button 元素添加 data-toggle="button" 作為其屬性即可，如下面實(shí)例所示：
注：在 Firefox 多次頁(yè)面加載時(shí)，按鈕可能保持表單的禁用或選擇狀態(tài)。解決方案是：添加 autocomplete="off"。
三、單選按鈕
類(lèi)似地，您可以創(chuàng)建單選按鈕組，并通過(guò)向 btn-group 添加 data 屬性 data-toggle="buttons" 來(lái)添加單選按鈕組的切換。
<div class="btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="radio" name="sex" autocomplete="off" checked>男 </label> <label for="" class="btn btn-primary"> <input type="radio" name="sex" autocomplete="off">女 </label> </div>
四、復(fù)選按鈕
您可以創(chuàng)建復(fù)選框組，并通過(guò)向 btn-group 添加 data 屬性 data-toggle="buttons" 來(lái)添加復(fù)選框組的切換。
<div class="btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="checkbox" name="fa" autocomplete="off" checked> 音樂(lè) </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 體育 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 美術(shù) </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 電腦 </label> </div>
Button 插件中的 button 方法中有三個(gè)參數(shù)： toggle、 reset、 string(比如 loading、complete)。
//可代替 data-toggle="button"
$('button').on('click', function() {
$(this).button('toggle');
})
下面是一些按鈕（Button）插件中有用的方法：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多關(guān)于Bootstrap內(nèi)容如可以參考專題：Bootstrap學(xué)習(xí)教程
相關(guān)文章
獲取url中用&隔開(kāi)的參數(shù)實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇獲取url中用&隔開(kāi)的參數(shù)實(shí)例(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
這篇文章主要介紹了JS forEach和map方法的用法與區(qū)別,結(jié)合實(shí)例形式分析了forEach和map方法的功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
這篇文章主要介紹了京東618疊蛋糕js腳本，基于auto.js 打開(kāi)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了js獲取內(nèi)聯(lián)樣式的方法,針對(duì)標(biāo)準(zhǔn)瀏覽器與IE瀏覽器進(jìn)行不同的判斷與獲取,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JavaScript對(duì)象和數(shù)組，需要的朋友可以參考下2015-12-12
詳解wepy開(kāi)發(fā)小程序踩過(guò)的坑(小結(jié))
這篇文章主要介紹了詳解wepy開(kāi)發(fā)小程序踩過(guò)的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
LayUI樹(shù)形表格treetable使用及說(shuō)明
這篇文章主要介紹了LayUI樹(shù)形表格treetable使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa
這篇文章主要介紹了javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa，效果非常不錯(cuò)，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn)
這篇文章主要介紹了wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
JS函數(shù)進(jìn)階之繼承用法實(shí)例分析
這篇文章主要介紹了JS函數(shù)進(jìn)階之繼承用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)繼承相關(guān)定義與使用操作技巧,需要的朋友可以參考下2020-01-01