Bootstrap button group (i)

button (Button group)

The use of a single button in a Web page sometimes does not meet our business needs, often see the combination of multiple buttons together, such as a rich text editor in a group of small icon buttons and so on. So in this section, we mainly introduce the button group components that the bootstrap framework provides to everyone.

SOURCE query:

The button group is also a standalone component, so you can find the corresponding source file:

Less version: the corresponding source file is buttons.less

Sass version: The corresponding source file is _buttons.scss

CSS version: corresponds to bootstrap.css file line No. 3131 ~ line No. 3291

How to use:

Button groups and drop-down menu components need to rely on the Button.js plug-in for proper operation. But we can also just call the Bootstrap.js file directly. Because this file is integrated with the Button.js plugin feature.

For the structural aspect, it is very simple. Use a container called "btn-group" to place multiple buttons in this container. As shown below:

<div class= "Btn-group" > <button type= "button" class= "Btn Btn-default" > <span class= "Glyphicon Glyphico N-step-backward "></span> </button> <button type=" button "class=" Btn Btn-default "> <span class= "Glyphicon glyphicon-step-forward" ></span> </button></div>

In addition to the use of <button> elements, other label elements, such as <a> tags, can be used. The only guarantee is that no matter what label is used, the label element in the ". Btn-group" container needs to have the class name ". Btn".

Button Group implementation source code as follows:

/* View Bootstrap.css file line No. 3131 ~ No. 3161 Line */

.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;} 

From the above we can see that the button group Four Corners are rounded (support CSS3 browser), but some small partners will ask, we usually make a page when each button is rounded, and in the button group of buttons, in addition to the first and the last one with the edge of the fillet, the other buttons do not have rounded corners, how it is implemented? In fact, the implementation method is very simple:

1, the default all buttons have rounded corners

2. Except for the first button and the last button (except for the drop-down button), the other buttons all cancel the fillet effect.

3. The first button only leaves the upper left corner and the lower left corner are rounded corners

4, the last button only left the upper right corner and the lower right corner is a rounded corner

The corresponding source code is as follows:

/* View Bootstrap.css file line No. 3174 ~ No. 3203 Line */

. 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 (Button toolbar)

In the Rich Text editor, group groups of buttons grouped together, such as copy, Cut, and paste a group, left, center, right, and justified, as shown in:

Then the Bootstrap Frame button toolbar also provides a way to make this, you just need to put the button group "Btn-group" in a large container "Btn-toolbar", as follows:

<div class= "Btn-toolbar" > <div class= "Btn-group" > ... </div> <div class= "Btn-group" > ... < ;/div> <div class= "Btn-group" > ... </div> <div class= "Btn-group" > ... </div></div>

The main implementation principle is to let the container's multiple grouping "btn-group" elements float, and the group and the group to maintain a 5px left outer margin. The code is as follows:

/* Source please refer to bootstrap.css file line No. 3162 ~ line No. 3173 * *

. 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;}

Notice that the float is cleared on "Btn-toolbar".

/* Source Please check the Bootstrap.css file on line No. 5062 */

. btn-toolbar:before,.btn-toolbar:after{display:table;content: "";}.btn-toolbar:after{Clear:both;}

Button group Size setting

In the Introduction button section, we know that buttons change the button size by adjusting the values of the padding, font-size, Line-height, and Border-radius properties by using the BTN-LG, BTN-SM, and Btn-xs three class names. So the size of the button group, we can also use a similar method:

. BTN-GROUP-LG: Large button Group

. BTN-GROUP-SM: Small button Group

. BTN-GROUP-XS: Super Small button Group

Just append the class name to the ". Btn-group" class name to get a different size group of buttons. As shown below:

<div class= "Btn-toolbar" > <div class= "Btn-group btn-group-lg" > ... </div> <div class= "Btn-group" &    Gt    ... </div> <div class= "Btn-group btn-group-sm" > ... </div> <div class= "Btn-group btn-group-xs" > ... </div></div>

Implement the style code as follows:

/* Source please refer to bootstrap.css file line No. 2320 ~ line No. 2340 * *

.btn-lg,.btn-group-lg>. btn{padding:10px 16px;  font-size:18px;  line-height:1.33; border-radius:6px;}.  Btn-sm,.btn-group-sm>. btn {padding:5px 10px;  font-size:12px;  line-height:1.5; border-radius:3px;}.  btn-xs,.btn-group-xs>. btn{padding:1px 5px;  font-size:12px;  line-height:1.5; border-radius:3px;}

Bootstrap button group (i)