Detailed explanation of JS component Bootstrap button group and drop-down button_javascript skills

this article will first share with you how to use button group. the specific content is as follows

1. button groups

1. single button group
use .btn-group to encapsulate multiple with .btn

<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

into

.

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

3. vertical button group
add .btn-group-vertical to .btn-group.

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

2. 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
also use .btn-large, .btn-small, and .btn-mini to control the size.

2. 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. menu that appears upward

<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> 

3. javascript

example
loading status. add data-loading-text="loading...".

copy code the code is as follows:

loading state

switch status. add data-toggle="button".

copy code the code is as follows:

single toggle

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> 

single choice. 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> 
</div> 

usage
javascript code triggers the switch state.
$().button("toggle")
you can also add the data-toggle attribute to trigger it automatically.
…

use javascript code to trigger the loading state, and the button displays the value specified by the data-loading-text attribute.

$().button("loading")

... note: firefox will keep the button disabled while the page loads. the workaround is to apply autocomplete="off" on the button.

reset button state using javascript code.
$().button("reset")

reset the button state and change the button text to the specified text. the complete in the following example is just an example and can be replaced.

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

the above is the entire content of this article, i hope it will be helpful to everyone's study.