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"。
三、單選按鈕
類似地，您可以創(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)文章
layui select動(dòng)態(tài)添加option的實(shí)例
下面小編就為大家分享一篇layui select動(dòng)態(tài)添加option的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本文主要介紹了node.js的事件機(jī)制，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js不完美解決click和dblclick事件沖突問(wèn)題
當(dāng)某個(gè)元素，如：div，同時(shí)綁定了click事件和dblclick事件，而這兩個(gè)事件又要處理相對(duì)獨(dú)立的業(yè)務(wù)，也就是click的時(shí)候不能觸發(fā)dblclick，dblclick的時(shí)候不能觸發(fā)click2012-07-07
下面小編就為大家分享一篇基于wordpress的ajax寫(xiě)法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
JavaScript的null和undefined區(qū)別示例介紹
在Javascript中對(duì)于這種生命后沒(méi)有給定初始值的變量，就給他一個(gè)undefined，如果要將一個(gè)標(biāo)識(shí)符聲明稱object類型，但是暫時(shí)不給他實(shí)例，那么就可以將它先初始化為null2014-09-09
微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了uni-app從安裝到卸載的入門(mén)教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JS實(shí)現(xiàn)IE狀態(tài)欄文字縮放效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)IE狀態(tài)欄文字縮放效果代碼,涉及JavaScript針對(duì)瀏覽器的相關(guān)調(diào)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了javascript框架設(shè)計(jì)之類工廠的相關(guān)資料,非常淺顯易懂，有需要的小伙伴可以查看下。2015-06-06
JavaScript編寫(xiě)的網(wǎng)頁(yè)小游戲，很給力
這篇文章主要介紹了JavaScript編寫(xiě)的網(wǎng)頁(yè)小游戲，附上全部代碼供大家查看，實(shí)現(xiàn)了網(wǎng)頁(yè)的小游戲頁(yè)面，需要的朋友可以參考下2017-08-08