The button group is also an independent component. The button group is the same as the drop-down menu component and needs to rely on the button.js plugin to function normally.
Combine a group of <div> into one <div> to make more complex components.
<div role="toolbar"> <div> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> <button type="button">4</button> <button type="button">5</button> <button type="button">5</button> <button type="button">6</button> </div> <div> <button type="button">7</button> <button type="button">8</button> </div> <div> <button type="button">9</button> </div> </div>
The button drop-down menu only looks like the drop-down menu. The only difference between them is that the external container div.dropdown is replaced with div.btn-group
<div> <button data-toggle="dropdown"> Button drop-down menu<span></span> </button> <ul> <li><a href="#">Menu List 1</a></li> <li><a href="#">Menu List 2</a></li> <li><a href="#">Menu List 3</a></li> <li><a href="#">Menu List 4</a></li> <li><a href="#">Menu List 5</a></li> </ul> </div>
bootstrap.css file
.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle { outline: 0;}.btn-group > .btn + .dropdown-toggle { padding-right: 8px; padding-left: 8px;}.btn-group > .btn-lg + .dropdown-toggle { padding-right: 12px; padding-left: 12px;}.btn-group.open .dropdown-toggle { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}.btn-group.open .dropdown-toggle.btn-link { -webkit-box-shadow: none; box-shadow: none;}The downward upward triangle of the button
The downward triangle of the button is by adding a span tag element to the button tag, and the class name is .caret
<button data-toggle="dropdown"> Button drop-down menu<span></span></button>
This triangle form is implemented through css. The following is the source code of bootstrap.css:
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent;}The above is all about this article, I hope it will be helpful to everyone's learning.