Button plug-in that Bootstrap must learn every day_javascript skills

Buttons were introduced in the Bootstrap Buttons chapter. With the Button plug-in, you can add some interactions, such as controlling button states, or create button groups for other components (such as toolbars).

If you want to reference the functionality of this plugin separately, then you need to reference button.js. Alternatively, as mentioned in the chapter Bootstrap Plugin Overview, you can reference bootstrap.js or a minified version of bootstrap.min.js.

1. Loading status

To add loading status to a button, simply add data-loading-text="Loading..." to the button element as its attribute, as shown in the example below:

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
 type="button"> 加载状态
</button>
<script>
 $(function() {
  $(".btn").click(function(){
   $(this).button('loading').delay(1000).queue(function() {
   // $(this).button('reset');
   });  
  });
 }); 
</script>

2. Single switching

To activate the toggle of a single button (i.e. change the normal state of the button to the pressed state or vice versa), just add data-toggle="button" as its attribute to the button element, as shown in the example below :

Copy code The code is as follows:

Single toggle

Note: On multiple page loads in Firefox, buttons may remain disabled or selected in the form. The solution is: add autocomplete="off".

3. Radio button

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 the btn-group.

<div class="btn-group" data-toggle="buttons">                
 <label for="" class="btn btn-primary active">               
  <input type="radio" name="sex" autocomplete="off" checked>男           
 </label>                         
 <label for="" class="btn btn-primary">                 
  <input type="radio" name="sex" autocomplete="off">女             
 </label>                         
</div>  

                                                             

4. Check button

You can create a checkbox group and add a toggle for the checkbox group by adding the data attribute data-toggle="buttons" to btn-group.

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">
  <input type="checkbox" name="fa" autocomplete="off" checked>
  音乐 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  体育 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  美术 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  电脑 </label>
</div>

The button method in the Button plug-in has three parameters: toggle, reset, string (such as loading, complete).

//可代替 data-toggle="button"

$('button').on('click', function() {
 $(this).button('toggle');
})
 

Here are some useful methods in Button plugins:

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more information about Bootstrap, you can refer to the special topic:

Bootstrap learning tutorial