Bootstrap每天必學(xué)之按鈕（Button）插件
按鈕（Button）在 Bootstrap 按鈕 一章中介紹過。通過按鈕（Button）插件，您可以添加進一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組。
如果您想要單獨引用該插件的功能，那么您需要引用 button.js?；蛘撸?Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
一、加載狀態(tài)
如需向按鈕添加加載狀態(tài)，只需要簡單地向 button 元素添加 data-loading-text="Loading..." 作為其屬性即可，如下面實例所示：
<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>
二、單個切換
如需激活單個按鈕的切換（即改變按鈕的正常狀態(tài)為按壓狀態(tài)，反之亦然），只需向 button 元素添加 data-toggle="button" 作為其屬性即可，如下面實例所示：
注：在 Firefox 多次頁面加載時，按鈕可能保持表單的禁用或選擇狀態(tài)。解決方案是：添加 autocomplete="off"。
三、單選按鈕
類似地，您可以創(chuàng)建單選按鈕組，并通過向 btn-group 添加 data 屬性 data-toggle="buttons" 來添加單選按鈕組的切換。
<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ù)選框組，并通過向 btn-group 添加 data 屬性 data-toggle="buttons" 來添加復(fù)選框組的切換。
<div class="btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="checkbox" name="fa" autocomplete="off" checked> 音樂 </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 方法中有三個參數(shù)： toggle、 reset、 string(比如 loading、complete)。
//可代替 data-toggle="button"
$('button').on('click', function() {
$(this).button('toggle');
})
下面是一些按鈕（Button）插件中有用的方法：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多關(guān)于Bootstrap內(nèi)容如可以參考專題：Bootstrap學(xué)習(xí)教程
相關(guān)文章
layui select動態(tài)添加option的實例
下面小編就為大家分享一篇layui select動態(tài)添加option的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了node.js的事件機制，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
當某個元素，如：div，同時綁定了click事件和dblclick事件，而這兩個事件又要處理相對獨立的業(yè)務(wù)，也就是click的時候不能觸發(fā)dblclick，dblclick的時候不能觸發(fā)click2012-07-07
下面小編就為大家分享一篇基于wordpress的ajax寫法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JavaScript的null和undefined區(qū)別示例介紹
在Javascript中對于這種生命后沒有給定初始值的變量，就給他一個undefined，如果要將一個標識符聲明稱object類型，但是暫時不給他實例，那么就可以將它先初始化為null2014-09-09
微信小程序?qū)崿F(xiàn)倒計時調(diào)用相機自動拍照功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)倒計時調(diào)用相機自動拍照功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了uni-app從安裝到卸載的入門教程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了JS實現(xiàn)IE狀態(tài)欄文字縮放效果代碼,涉及JavaScript針對瀏覽器的相關(guān)調(diào)用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了javascript框架設(shè)計之類工廠的相關(guān)資料,非常淺顯易懂，有需要的小伙伴可以查看下。2015-06-06
這篇文章主要介紹了JavaScript編寫的網(wǎng)頁小游戲，附上全部代碼供大家查看，實現(xiàn)了網(wǎng)頁的小游戲頁面，需要的朋友可以參考下2017-08-08