This article will first share with you how to use button groups . The specific content is as follows
1. Button Groups
1. Single button group
Use .btn-group to encapsulate multiple <buttons> with .btn
<div> <button>1</button> <button>2</button> <button>3</button> </div>
2. Multiple button groups
Put multiple <div> into <div>.
<div> <div> ... </div> <div> ... </div> </div> </div>
3. Vertical button group
Add .btn-group-vertical to .btn-group.
<div> ... </div>
2. Pull-down button (Button Dropdowns)
example
<div> <a data-toggle="dropdown" href="#"> Action <span></span> </a> <ul> <!-- dropdown menu links --> </ul> </div>
1. Control the size
Also use .btn-large, .btn-small, and .btn-mini to control the size.
2. Split pull-down button
<div> <button>Action</button> <button data-toggle="dropdown"> <span></span> </button> <ul> <!-- dropdown menu links --> </ul> </div>
3. The menu that appears upward
<div> <button>Dropup</button> <button data-toggle="dropdown"> <span></span> </button> <ul> <!-- dropdown menu links --> </ul> </div>
3. JavaScript
example
Loading status. Add data-loading-text="Loading...".
Copy the code as follows: <button type="button" data-loading-text="Loading...">Loading state</button>
Switch status. Add data-toggle="button".
Copy the code as follows: <button type="button" data-toggle="button">Single Toggle</button>
Check box. Add data-toggle="buttons-checkbox" after btn-group.
<div data-toggle="buttons-checkbox"> <button type="button">Left</button> <button type="button">Middle</button> <button type="button">Right</button> </div>
Single choice. Add data-toggle="buttons-radio" after btn-group.
<div data-toggle="buttons-radio"> <button type="button">Left</button> <button type="button">Middle</button> <button type="button">Right</button> </div>
usage
JavaScript code triggers the switch status.
$().button("toggle")
You can also add the data-toggle attribute to trigger automatically.
<button type="button" data-toggle="button" >…</button>
Use JavaScript code to trigger the loading state, and the button displays the value specified by the data-loading-text property.
$().button("loading")
<button type="button" data-loading-text="loading stuff..." >...</button>
Note: Firefox will keep the button invalid when the page is loaded. The workaround is to apply autocomplete="off" on the button.
Use JavaScript code to reset button status.
$().button("reset")
Resets the button status and turns the button text into the specified text. The complete in the following example is only an example and can be replaced.
<button data-complete-text="finished!" >...</button> <script> $('.btn').button('complete') </script>The above is all about this article, I hope it will be helpful to everyone's learning.