Bootstrap Button（按鈕）

描述

Bootstrap Button（按鈕）JavaScript 插件允許您加強按鈕的功能。您可以控制按鈕的狀態，也可以為組件創建按鈕組，比如工具條。

什麼是必需的

您必須引用 jquery.js 和 bootstrap-button.js - 這兩個 JavaScript 檔。它們都位於 docs/assets/js 檔夾內。

如何使用它

您可以不編寫任何 JavaScript 只通過標記使用該插件，也可以通過 JavaScript 啟用按鈕。

實例

第一個實例演示了如何不通過 JavaScript 使用按鈕插件。

實例

<div class="container">
    <div class="row">
        <div class="span8">
            <h2>Bootstrap 按鈕 JavaScript 插件實例</h2>
            <h3>控制狀態</h3>
            <p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
            <h3>單項切換</h3>
            <p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
            <h3>確認框</h3>
            <p><div class="btn-group" data-toggle="buttons-checkbox">
                <button class="btn btn-primary">Left</button>
                <button class="btn btn-primary">Middle</button>
                <button class="btn btn-primary">Right</button>
            </div></p>
            <h3>單選框</h3>
            <p><div class="btn-group" data-toggle="buttons-radio">
                <button class="btn btn-primary">Left</button>
                <button class="btn btn-primary">Middle</button>
                <button class="btn btn-primary">Right</button>
            </div></p>
        </div>
    </div>
</div>
<!--Except     'Control state', other buttons require only jquery.js and bootstrap-button.js JavaScript files-->
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/assets/js/bootstrap-transition.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>

通過 javascript 啟用按鈕

如需通過 JavaScript 啟用按鈕，請使用下麵的 JavaScript 代碼，其中 ' .nav-tabs ' 是包含按鈕的 div 的 class。

$('.nav-tabs').button()

方法

該插件有一些方法。現在我們將通過用法代碼進行討論。

$().button('toggle')

<button class="btn" data-toggle="button" >…</button>

該方法切換按鈕狀態。賦予按鈕被啟動時的狀態和外觀。使用 'data-toggle="button"' 自動切換按鈕為啟動狀態。

$().button('loading')

<button class="btn" data-loading-text="loading stuff..." >...</button>

該方法設置按鈕狀態為 loading - 即將按鈕置為禁用狀態並將文字內容切換為 loading。通過使用 'data-loading-text' 屬性可以在按鈕元素上定義 loading 文本。

如果您使用 Firefox 流覽器，您將發現，在頁面加載之後，禁用狀態不會自動解除，請使用 'autocomplete="off"' 來避免這個問題。

$().button('reset')

該方法重置按鈕狀態，並將按鈕上的文本還原為原始值。

$().button(string)

<button class="btn" data-loading-text="loading stuff..." >...</button>

該方法重置按鈕狀態，並將按鈕上的文本重置為傳入的值。

<button class="btn" data-complete-text="finished!" >...</button>
<script>
    $('.btn').button('complete')
</script>

點擊這裏，下載本教學中使用到的所有 HTML、CSS、JS 和圖片檔。