按鈕(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" 作為其屬性即可,如下面實例所示:
三、單選按鈕
<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>
四、復選按鈕
<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>
//可代替 data-toggle="button" $('button').on('click', function() { $(this).button('toggle'); })
以下是一些按鈕(Button)插件中有用的方法:
以上就是本文的全部內容,希望對大家的學習有所幫助,更多關於Bootstrap內容如可以參考專題:Bootstrap學習教程