Bootstrap Button
Description
The Bootstrap Button JavaScript plugin allows you to enhance the functionality of buttons. You can control the state of buttons, and also create button groups for components, such as toolbars.
What is required
You must reference jquery.js and bootstrap-button.js - these two JavaScript files. They are both located in the docs/assets/js folder.
How to use it
You can use the plugin without writing any JavaScript, only through markup, or you can enable buttons via JavaScript.
Example
The first example demonstrates how to use the button plugin without JavaScript.
Example
<div class="row">
<div class="span8">
<h2>Bootstrap Button JavaScript Plugin Example</h2>
<h3>Controlling 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>Confirm Box</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 Box</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.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/assets/js/bootstrap-transition.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js.html"></script>
View example online
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. Now we will discuss them with usage code.
$().button('toggle')
<button class="btn" data-toggle="button" >…</button>
This method toggles the button state. It gives the button the state and appearance of being activated. Use 'data-toggle="button"' to automatically toggle the button to the active state.
$().button('loading')
<button class="btn" data-loading-text="loading stuff..." >...</button>
This method sets the button state to loading - that is, it sets the button to a disabled state 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 use Firefox, you will find that the disabled state is not automatically removed after the page loads. Use 'autocomplete="off"' to avoid this issue.
$().button('reset')
This method resets the button state and restores the text on the button to its original value.
$().button(string)
<button class="btn" data-loading-text="loading stuff..." >...</button>
This method resets the button state and resets the text on the button 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.
Other Extensions