This article will introduce to you the button component inBootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Related recommendations: "bootstrap Tutorial"
The button group is also an independent component, so you can find the corresponding source code file:
Less: buttons.less
Sass:_buttons.scss
Css:Bootstrap.css 3131 lines ~ 3291 lines
Button group and drop-down menu components Likewise, it needs to rely on the button.js plug-in to function properly.
Structural aspect: Use a container with a class name btn-group and place multiple buttons in this container.
…
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 > .btn:focus, .btn-group-vertical > .btn:focus, .btn-group > .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, .btn-group .btn-group + .btn-group { margin-left: -1px; }
In addition to the
The four corners of the button group are rounded, except for the first and last buttons which have edges. Except for the rounded corners, the other buttons do not have rounded corners.
Detailed explanation:
1. Default: all buttons are rounded
2. Except for the first button and the last button, the rounded corners of other buttons are cancelled
3. Only the upper right corner and lower right corner of the last button are rounded
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, to arrange button groups together, such as copying, cutting, pasting a group, left-aligning, center-aligning, right-aligning and aligning a group at both ends, you need to use the bootstrap frame button tool. Bar btn-toolbar
…………
Principle: Mainly let multiple groupings of the container.btn-group elements float, and maintain a left margin of 5px 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 float on btn-toolbar
.btn-toolbar:before, .btn-toolbar:after｛ display: table; content: " "; ｝ .btn-toolbar:after{ clear: both; }
Example:
Button nested grouping
Many times, we put the drop-down menu into a very ordinary button group Arrange them together to achieve an effect similar to a navigation menu:
When using it, you only need to replace the class name of the dropdown container used to create the drop-down menu with btn-group, and Put it at the same level as ordinary buttons:
.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; } .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; }
Button vertical grouping
Just replace the horizontal grouping class name .btn-group with .btn-group- Just vertical.
.btn-group-vertical > .btn, .btn-group-vertical > .btn-group, .btn-group-vertical > .btn-group > .btn { display: block; float: none; width: 100%; max-width: 100%; } .btn-group-vertical > .btn-group > .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-radius: 0; } .btn-group-vertical > .btn:first-child:not(:last-child) { border-top-right-radius: 4px; border-bottom-right-radius: 0; 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; }
Equally divided buttons are also called adaptive group buttons:
The width of the entire button group is 100% of the container, and each button in the button group is equally divided The width of the entire container. For example, there are five buttons in a button group, and each button is 20% of the container width; there are four buttons in a button group, and each button is 25% of the container width;
Implementation method: Just append a class name .btn-group-justified
首页 案例分析 联系我们 关于我们
.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%; }
to the button group.btn-group to simulate .btn-group-justified into a table (display: table), and put the The button template is simulated as a table cell (display: table-cell).
Note: When making equal button groups, try to use thetag to make buttons, because when using the button tag element, using display: table is not friendly in some browsers.
For more programming-related knowledge, please visit:Introduction to Programming! !
The above is the detailed content of Bootstrap learning button component (1). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
