Bootstrap button components detailed _javascript tips

Button groups and Drop-down menu components need to rely on the Button.js plug-in to function properly.

structural aspect: use a container with a class name of Btn-group to place multiple buttons in this container .

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

Less:buttons.less

Sass:_buttons.scss

CSS:BOOTSTRAP.CSS 3131 Lines ~3291 Line

<div class= "Btn-group" >
<button type= "button" class= "Btn Btn-default" >
<span class= " Glyphicon glyphicon-step-backward "></span>
</button>
...
<button type= "button" class= "Btn Btn-default" >
<span class= "Glyphicon glyphicon-step-forward" ></ 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 > 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 being able to use <button> elements, you can use other tag elements, such as <a> tags, and the only guarantee is that, regardless of the label used,. The label element in the Btn-group container needs to have a class name. btn

The four corners of the button group are rounded corners, except that the first and last buttons have rounded corners on the edges, and the other buttons do not have rounded corners.

Detailed

1, the default: All buttons are rounded corners

2, except the first button and the last button, the other button rounded corners canceled

3, the last button left only the upper right corner and the lower right corner for rounded corners

Source:

. 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 Tool bar

In a rich text editor, group groups of group buttons, such as copy, Cut, paste, left, align, Align, Align, and then need to use the Bootstrap Frame button toolbar Btn-toolbar

<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>

Principle: The main is to let the container of multiple groupings. Btn-group elements float, and keep the 5px left outer margin between groups and 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;
}

Notice to clear the float on the Btn-toolbar

. Btn-toolbar:before,
btn-toolbar:after{
display:table;
Content: "";
}
. btn-toolbar:after{
clear:both;
}

Example:

 <div class= "Btn-toolbar" > <div class= "Btn-group" > <button class= "btn" Btn-default "type=" button "> <span class=" Glyphicon glyphicon-align-left "></span> </button> <
Button class= "btn btn-default" type= "button" > <span class= "Glyphicon glyphicon-align-center" ></span> </button> <button class= "btn btn-default" > <span class= "Glyphicon glyphicon-align-right" ></span > </button> <button class= "btn btn-default" type= "button" > <span class= "Glyphicon Glyphicon-align-justify "></span> </button> </div> <div class=" Btn-group "> <button
class= "btn btn-default" type= "button" > <span class= "Glyphicon glyphicon-font" ></span> </button> <button class= "btn btn-default" type= "button" > <span class= "Glyphicon glyphicon-bold" ></span> </ Button> </div> </div> 

button nested grouping

Most of the time, we put the Drop-down menu very common button group together, to achieve similar to the navigation menu effect:

When used, simply replace the class name of the dropdown container that was previously made with the Drop-down menu with Btn-group, and put it at the same level as the normal button:

<div class= "Btn-group" > <button class= "btn btn-default" type= "button" > Home </button> <button class= "Btn Btn-default" type= "button" > Products </button> <button class= "btn btn-default" type= "button" > Case study </ button> <button class= "btn btn-default" type= "button" > Contact us </button> <div class= "Btn-group" > < Button class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" type= "button" > About us <span class= "caret" ></span> </button> <ul class= "Dropdown-menu" > <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:last-child,. Btn-group >.btn-group:first-child>. dropdown-toggle {border-top-right-radius:0; border-bottom-right-radius:0;} Btn-group & gt; .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,.); Box-shadow:inset 0 3px 5px rgba (0, 0, 0,.); Btn-group. Open. Dropdown-toggle.btn-link {-webkit-box-shadow:none; box-shadow:none;}

Button Vertical Grouping

Only the class names that are grouped horizontally can be replaced by Btn-group. Btn-group-vertical.

<div class= "btn-group-vertical" > <button class= "btn btn-default" type= "button" > Home </button> < Button class= "btn btn-default" type= "button" > Product show </button> <button class= "btn btn-default" type= "button" > Case Analysis </button> <button class= "btn btn-default" type= "button" > Contact us </button> <div class= " Btn-group "> <button class=" btn btn-default dropdown-toggle "data-toggle=" dropdown "type=" button "> About Us < Span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" > <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 {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; }

The split button is also called the Adaptive Group button:

The width of the entire button group is 100% of the container, and each button in the button group splits the width of the entire container, for example, there are five buttons in a group of buttons, each button is 20% of the container width, and a button group has four buttons, each button is 25% of the container width;

Implementation method: Simply append a class name to the button group. Btn-group. btn-group-justified

<div class= "Btn-group btn-group-justified" > <buttton class= "btn btn-default"
type= "button" > Home </ buttton>
<buttton class= "btn btn-default" type= "button" > Case Analysis </buttton>
<buttton class= " BTN btn-default "type=" button "> Contact us </buttton>
<buttton class=" btn btn-default "type=" button "> About 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 the. btn-group-justified into a table (display:table) and simulate the inside button template into a table cell (Display:table-cell).

Note: When making a button group, try to use the <a> tag to make the button, because using the button tag element, using display:table in a partial browser is not friendly

Recommended readings for cloud-dwelling communities:

Detailed Bootstrap button

The above is a small set to introduce the Bootstrap button components, we hope to help!