Bootstrap Button Plugin

We are already discussed about Buttons in Bootstrap Buttons tutorial. But using JavaScript Bootstrap Button plugin you can add some more interactions just like control button states or you can make groups for more components like toolbars.

If you want to implement functionality of this plugin individually, simple include the button.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.

Loading State

Simply add data-loading-text=”Loading…” attribute to the button element to add a loading state to a button as shown in the following example:

Single toggle

Add data-toggle=”button” To activate toggling on a single button as an attribute to the button tag as shown in the following example:

Checkbox

By adding data-toggle=”buttons” to the btn-group to create group of check boxes and add toggling. For pre-checked options, you must add the .active class to the input’s label yourself.

Radio

You can also make group of radio buttons by adding this data attribute data-toggle=”buttons” to the btn-group. For preselected options, you must add the .active class to the input’s label yourself.

Usage

Enable buttons plugin via JavaScript as below:

Options

No options

Methods

The following methods are useful for buttons plugin:

button(‘toggle’)

Toggles push state. Gives the button the appearance that it has been activated. You can also enable auto toggling of a button by using the data-toggle attribute.

Example use of above methods:

.button(‘loading’)

On the loading disables the button and changed the text. Using this data attribute data-loading-text you can define and change loading text.

Example use of above methods:

.button(‘reset’)

Resets button state, swaps text to original text back. This method returns the button back to the primary state.

Example use of above methods:

.button(string)

To reset the button state and swap text to any new content, use this method.

Example use of above methods:

Leave a Reply

Your email address will not be published. Required fields are marked *