The button group is the same as the drop-down menu component, and needs to rely on the button.js plugin to function properly.
Structural aspect: Use a container with class name btn-group and place multiple buttons in this container.
The button group is also an independent component, so the corresponding source file can be found:
Less: buttons.less
Sass:_buttons.scss
Css:Bootstrap.css Line 3131~3291
<div><button type="button"><span></span></button>…<button type="button"><span></span></button></div>
CSS:
.btn-group,.btn-group-vertical {position: relative;display: inline-block;vertical-align: middle;}.btn-group > .btn,.btn-group-vertical > .btn {position: relative;float: left;}.btn-group > .btn:hover,.btn-group-vertical > .btn:hover,.btn-group-vertical > .btn:focus,.btn-group-vertical > .btn:focus,.btn-group-vertical > .btn:active,.btn-group-vertical > .btn:active,.btn-group > .btn.active,.btn-group-vertical > .btn.active {z-index: 2;}.btn-group > .btn:focus,.btn-group-vertical > .btn:focus {outline: none;}.btn-group .btn + .btn,.btn-group .btn + .btn-group,.btn-group .btn-group + .btn-group {margin-left: -1px;}In addition to using the <button> element, you can also use other tag elements, such as the <a> tag. The only thing to ensure is that no matter what tag is used, the tag element in the .btn-group container needs to have the class name.btn
The four corners of the button group are all rounded corners, except for the first and last buttons that have rounded corners on the edges, the other buttons have no round corners.
Detailed explanation:
1. Default: All buttons are rounded corners
2. Except for the first button and the last button, the other buttons will be rounded.
3. The last button is left only as rounded corners and the lower right corners.
Source code:
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {border-radius: 0;}.btn-group > .btn:first-child {margin-left: 0;}.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {border-top-right-radius: 0;border-bottom-right-radius: 0;}.btn-group > .btn:last-child:not(:first-child),.btn-group > .dropdown-toggle:not(:first-child) {border-top-left-radius: 0;border-bottom-left-radius: 0;}.btn-group > .btn-group {float: left;}.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {border-radius: 0;}.btn-group > .btn-group:first-child> .btn:last-child,.btn-group > .btn-group:first-child> .dropdown-toggle {border-top-right-radius: 0;border-bottom-right-radius: 0;}.btn-group > .btn-group:last-child> .btn:first-child {border-top-left-radius: 0;border-bottom-left-radius: 0;}Button Group Toolbar
In a rich text editor, arrange button groups together, such as copy, cut, paste a group, align left, center, right and two ends, and use the bootstrap frame button toolbar btn-toolbar
<div><div>…</div><div>…</div><div>…</div><div>…</div><div>…</div></div>
Principle: Mainly let multiple groups of the container .btn-group elements float, and keep a 5px left outer distance between groups.
.btn-toolbar {margin-left: -5px;}.btn-toolbar .btn-group,.btn-toolbar .input-group {float: left;}.btn-toolbar > .btn,.btn-toolbar > .btn-group,.btn-toolbar > .input-group {margin-left: 5px;}Note that clear the float on btn-toolbar
.btn-toolbar:before,.btn-toolbar:after{display: table;content: " ";}.btn-toolbar:after{clear: both;}Example:
<div><div><button type="button"><span></span></button><button type="button"><span></span></button><button><button></span></button><button type="button"><span></span></div><div><button type="button"><span></span></button></div>
Button nesting grouping
Many times, we arrange the button groups of the drop-down menu together to achieve an effect similar to the navigation menu:
When using it, just change the class name of the dropdown container that made the dropdown menu before to btn-group and place it on the same level as the normal button:
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="#">Company Profile</a></li><li><a href="#">Corporate Culture</a></li><li><a href="#">Organizational Structure</a></li><li><a href="#">Customer Service</a></li></ul></div></div>.btn-group > .btn-group {float: left;}.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {border-radius: 0;}.btn-group > .btn-group:first-child,.btn-group > .btn-group:first-child> .dropdown-toggle {border-top-right-radius: 0;border-bottom-right-radius: 0;}.btn-group > .btn-group:last-child> .btn:first-child {border-top-left-radius: 0;border-bottom-left-radius: 0;}.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;}Buttons vertically grouped
Just replace the horizontally grouped class name.btn-group with .btn-group-vertical.
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="#">Company Profile</a></li><li><a href="#">Corporate Culture</a></li><li><a href="#">Organizational Structure</a></li><li><a href="#">Customer Service</a></li></ul></div></div>.btn-group-vertical > .btn,.btn-group-vertical > .btn-group,.btn-group-vertical > .btn-group,.btn-group-vertical > .btn-group-vertical > .btn-group-vertical > .btn {display: block;float: none;width: 100%;max-width: 100%;}.btn-group-vertical > .btn {float: none;}.btn-group-vertical > .btn + .btn,.btn-group-vertical > .btn + .btn-group,.btn-group-vertical > .btn-group + .btn,.btn-group-vertical > .btn-group + .btn-group {margin-top: -1px;margin-left: 0;}.btn-group-vertical > .btn:not(:first-child):not(:last-child) {border-top-right-radius: 4px;border-bottom-right-radius: .btn {border-bottom-left-radius: 0;}.btn-group-vertical > .btn:last-child:not(:first-child) {border-top-left-radius: 0;border-top-right-radius: 0;border-bottom-left-radius: 4px;}.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {border-radius: 0;}.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {border-bottom-right-radius: 0;border-bottom-left-radius: 0;}.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {border-top-left-radius: 0;border-top-right-radius: 0;}The equalization button is also called the adaptive grouping button:
The width of the entire button group is 100% of the container, and each button in the button group divides the width of the entire container. For example, there are five buttons in a button group, each button is 20% of the width of the container; there are four buttons in a button group, each button is 25% of the width of the container;
Implementation method: Just add a class name.btn-group-justified to the button group.btn-group
<div><buttton type="button">Home</buttton><buttton type="button">Case Analysis</buttton><buttton type="button">Contact Us</buttton></div>.btn-group-justified {display: table;width: 100%;table-layout: fixed;border-collapse: separate;}.btn-group-justified > .btn,.btn-group-justified > .btn-group {display: table-cell;float: none;width: 1%;}.btn-group-justified > .btn-group .btn {width: 100%;}Simulate .btn-group-justified into a table (display: table), and simulate the button template inside into a table cell (display: table-cell).
Note: When making a group of equal buttons, try to use the <a> tag to make buttons, because when using button tag elements, using display: table is not friendly to support in some browsers.
Recommended readings from Wulin.com:
Detailed explanation of Bootstrap button
The above is the Bootstrap button component introduced to you by the editor. I hope it will be helpful to you!