Button is introduced in the Bootstrap button chapter. With the Button plugin, you can add some interactions, such as controlling the button status, or creating button groups for other components such as toolbars.
If you want to reference the functionality of the plugin separately, then you need to reference button.js. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
1. Loading status
To add loading status to the button, simply add data-loading-text="Loading..." to the button element as its attribute, as shown in the following example:
<button id="fat-btn" data-loading-text="Loading..." type="button"> Loading status</button><script> $(function() { $(".btn").click(function() { $(this).button('loading').delay(1000).queue(function() { // $(this).button('reset'); }); }); }); }); </script>2. Single switch
To activate the switch of a single button (i.e., to change the normal state of the button to the press state, and vice versa), just add data-toggle="button" to the button element as its attribute, as shown in the following example:
Copy the code as follows: <button data-toggle="button" autocomplete="off">Single switch</button>
Note: When Firefox page loads multiple times, the button may keep the form disabled or selected. The solution is: add autocomplete="off".
3. Radio buttons
Similarly, you can create a radio button group and add a toggle for the radio button group by adding the data attribute data-toggle="buttons" to btn-group.
<div data-toggle="buttons"> <label for=""> <input type="radio" name="sex" autocomplete="off" checked>Male</label> <label for=""> <input type="radio" name="sex" autocomplete="off">Female</label> </div>
4. Check button
You can create a checkbox group and add a toggle to the checkbox group by adding the data attribute data-toggle="buttons" to btn-group.
<div data-toggle="buttons"> <label for=""> <input type="checkbox" name="fa" autocomplete="off" checked> Music</label> <label for=""> <input type="checkbox" name="fa" autocomplete="off"> Sports</label> <label for=""> <input type="checkbox" name="fa" autocomplete="off"> Fine Art</label> <label for=""> <input type="checkbox" name="fa" autocomplete="off"> Computer</label></div>
There are three parameters in the button method in the Button plug-in: toggle, reset, and string (such as loading, complete).
//It can replace data-toggle="button"$('button').on('click', function() { $(this).button('toggle');})Here are some useful methods in Button plugins:
The above is all the content of this article. I hope it will be helpful to everyone's learning. For more information about Bootstrap, please refer to the topic: Bootstrap Learning Tutorial