JS Component Bootstrap button Group and Drop-down button for detailed _javascript tips

This article first for everyone to share the use of button group , the specific contents are as follows

One, button group (buttons Groups)

1, a single button group
Use. Btn-group to encapsulate multiple bands. BTN <button>

<div class= "Btn-group" > 
 <button class= "btn" >1</button> 
 <button class= "BTN" >2</ button> 
 <button class= "btn" >3</button> 
</div> 

2. Multiple button groups
Put multiple <div class= "Btn-group" > Into <div class= "Btn-toolbar" >.

<div class= "Btn-toolbar" > 
 <div class= "Btn-group" > 
  ... 
 </div> 
 <div class= "Btn-group" > 
  ... 
 </div> 

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

<div class= "Btn-group btn-group-vertical" > ... 
  

Two, the Drop-down button (button dropdowns)

Example

<div class= "Btn-group" > 
 <a class= "btn dropdown-toggle" data-toggle= "dropdown" href= "#" > 
  Action 
  <span class= "caret" ></span> 
 </a> 
 <ul class= "Dropdown-menu" > 
  <!-- Dropdown menu Links--> 
 </ul> 
</div> 

1. Control size
the same uses. Btn-large,. Btn-small,. Btn-mini control size.

2, the Split Drop-down button

<div class= "Btn-group" > 
 <button class= "btn" >Action</button> 
 <button class= "BTN" Dropdown-toggle "data-toggle=" dropdown "> 
  <span class=" caret "></span> 
 </button> 
 <ul class= "Dropdown-menu" > 
  <!--dropdown menu links--> 
 </ul> 
</div> 

3, up the menu

<div class= "Btn-group dropup" > 
 <button class= "btn" >Dropup</button> 
 <button class= " BTN dropdown-toggle "data-toggle=" dropdown "> 
  <span class=" caret "></span> 
 </button> 
 <ul class= "Dropdown-menu" > 
  <!--dropdown menu links--> 
 </ul> 
</div> 

Third, JavaScript

Example
Loading status. Add data-loading-text= "Loading ...".

Copy Code code as follows:

<button type= "button" class= "btn btn-primary" data-loading-text= "Loading ..." >loading state</button>

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

Copy Code code as follows:

<button type= "button" class= "btn btn-primary" data-toggle= "button" >single toggle</button>

check box. Add data-toggle= "Buttons-checkbox" after Btn-group.

<div class= "Btn-group" data-toggle= "Buttons-checkbox" > 
 <button type= "button" class= "Btn btn-primary" >Left</button> 
 <button type= "button" class= "btn btn-primary" >Middle</button> 
 < Button type= "button" class= "btn btn-primary" >Right</button> 
</div> 

Radio. Add data-toggle= "Buttons-radio" after Btn-group.

<div class= "Btn-group" data-toggle= "Buttons-radio" > 
 <button type= "button" class= "Btn btn-primary" > left</button> 
 <button type= "button" class= "btn btn-primary" >Middle</button> 
 <button Type= "button" class= "Btn btn-primary" >Right</button> 

Usage
The JavaScript code triggers the switch state.
$ (). Button ("Toggle")
You can also add the Data-toggle property to trigger automatically.
<button type= "button" class= "BTN" data-toggle= "button" >...</button>

Use JavaScript code to trigger the load state, while the button displays the value specified by the Data-loading-text property.

$ (). Button ("Loading")

<button type= "button" class= "btn" data-loading-text= "Loading stuff ..." >...</button>
Note: Firefox keeps the button inactive when the page is loaded. The workaround is to apply autocomplete= "off" on the button.

Resets the button state using JavaScript code.
$ (). Button ("reset")

Resets the button state and changes the button text to the specified text. The following example complete is only an example and can be replaced.

<button class= "btn" data-complete-text= "finished!" >...</button> 
<script> 
 $ ('. Btn '). Button (' complete ') 

The above is the entire content of this article, I hope to help you learn.