Bootstrap每天必學之按鈕（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>
四、復選按鈕
您可以創(chuàng)建復選框組，并通過向 btn-group 添加 data 屬性 data-toggle="buttons" 來添加復選框組的切換。
<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"> 美術 </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）插件中有用的方法：
以上就是本文的全部內容，希望對大家的學習有所幫助，更多關于Bootstrap內容如可以參考專題：Bootstrap學習教程
相關文章
下面小編就為大家?guī)硪黄@取url中用&隔開的參數(shù)實例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了JS forEach和map方法的用法與區(qū)別,結合實例形式分析了forEach和map方法的功能、原理、使用方法及相關操作注意事項,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了京東618疊蛋糕js腳本，基于auto.js 打開，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了js獲取內聯(lián)樣式的方法,針對標準瀏覽器與IE瀏覽器進行不同的判斷與獲取,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JavaScript對象和數(shù)組，需要的朋友可以參考下2015-12-12
這篇文章主要介紹了詳解wepy開發(fā)小程序踩過的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了LayUI樹形表格treetable使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa
這篇文章主要介紹了javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa，效果非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了wavesurfer.js繪制音頻波形圖的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
這篇文章主要介紹了JS函數(shù)進階之繼承用法,結合實例形式分析了JavaScript函數(shù)繼承相關定義與使用操作技巧,需要的朋友可以參考下2020-01-01