YouTip

## Bootstrap Buttons The Bootstrap Button JavaScript plugin allows you to enhance the functionality of buttons. You can control button states and create button groups for components, such as toolbars. You must include both jquery.js and bootstrap-button.js—these two JavaScript files. Both are located in the docs/assets/js folder. You can use this plugin without writing any JavaScript at all, just by using markup, or you can enable buttons via JavaScript. The first example demonstrates how to use the button plugin without JavaScript. ## Example (#) 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() This plugin has several methods. We'll now discuss them with usage examples. ## $().button('toggle') … This method toggles the button's state. It gives the button a state and appearance when activated. Use 'data-toggle="button"' to automatically toggle the button into an active state. ## $().button('loading') ... This method sets the button's state to loading—disabling the button and changing its text content to "loading". You can define the loading text on the button element by using the 'data-loading-text' attribute. If you're using Firefox, you'll notice that after the page loads, the disabled state won't automatically be removed. To avoid this issue, use 'autocomplete="off"'. ## $().button('reset') This method resets the button's state and restores the button's text to its original value. ## $().button(string) ... This method resets the button's state and sets the button's text back to the value passed in. ...$('.btn').button('complete') [Click here to download all HTML, CSS, JS, and image files used in this tutorial.](#)