JS component Bootstrap button group and drop-down button details _ javascript skills

This article mainly introduces relevant information about the JS component Bootstrap button group and the drop-down button. If you are interested, refer to this article to share with you. Button GroupThe usage is as follows:

1. Button Groups)

1. single button group
Encapsulate multiple. btn-groups

1 2 3

2. Multiple button groups
Add multiple

Put

.

  
   ...  
  
   ...  
 
 

3. Vertical button group
Add. btn-group-vertical to. btn-group.

  ... 
 

2. drop-down Button (Button Dropdowns)

Example

     Action       
 
 
   
    
 
 
 
 

1. Control the size
Use. btn-large,. btn-small, and. btn-mini to control the size.

2. Split the drop-down button

  Action         
 
 
   
    
 
 
 
 

3. The menu appears up.

  Dropup         
 
 
   
    
 
 
 
 

Iii. JavaScript

Example
Load Status. Add data-loading-text = "Loading ...".

The Code is as follows:

Loading state

Switch Status. Add data-toggle = "button ".

The Code is as follows:

Single Toggle

Check box. Add data-toggle = "buttons-checkbox" after btn-group ".

  Left  Middle  Right 
 

Single choice. Add data-toggle = "buttons-radio" after btn-group ".

  Left  Middle  Right 
 

Usage
The JavaScript code triggers the switch status.
$ (). Button ("toggle ")
You can also add the data-toggle attribute to trigger automatically.
...

Use JavaScript code to trigger the loading status, and click the button to display the value specified by the data-loading-text attribute.

$ (). Button ("loading ")

...
Note: Firefox will keep the button invalid when loading the page. The work und is to apply autocomplete = "off" on the button ".

Use JavaScript code to reset the button status.
$ (). Button ("reset ")

Reset the button status and change the button text to the specified text. The complete in the following example is only an example and can be replaced.

... 《script》  $('.btn').button('complete') 《script》 

The above is all the content of this article, hoping to help you learn.