Bootstrap Button

Description

The Bootstrap Button JavaScript plugin enhances the functionality of buttons. You can control the state of buttons and create button groups, such as toolbars.

What is Required

You must include jquery.js and bootstrap-button.js - these two JavaScript files. They are located in the docs/assets/js folder.

How to Use It

You can use the plugin without writing any JavaScript by just using markup, or you can enable buttons through JavaScript.

Example

The first example demonstrates how to use the button plugin without JavaScript.

Example

<div class="container">
    <div class="row">
        <div class="span8">
            <h2>Bootstrap Button JavaScript Plugin Example</h2>
            <h3>Control State</h3>
            <p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
            <h3>Single Toggle</h3>
            <p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
            <h3>Checkbox</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>Radio</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>

Enable Buttons via JavaScript

To enable buttons via JavaScript, use the following JavaScript code where '.nav-tabs' is the class of the div containing the buttons.

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

Methods

The plugin has some methods. We will discuss them through usage codes now.

$().button('toggle')

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

This method toggles the button state. It gives the button the activated state and appearance. Using 'data-toggle="button"' automatically toggles the button to the activated state.

$().button('loading')

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

This method sets the button state to loading - it disables the button and switches the text content to loading. By using the 'data-loading-text' attribute, you can define the loading text on the button element.

If you are using Firefox, you may find that the disabled state does not automatically reset after the page loads. Use 'autocomplete="off"' to avoid this issue.

$().button('reset')

This method resets the button state and restores the button text to its original value.

$().button(string)

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

This method resets the button state and sets the button text to the passed value.

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

Click here to download all the HTML, CSS, JS, and image files used in this tutorial.