Bootstrap the button _javascript skills every day

1, button (button group)

The use of a single button in a Web page sometimes does not meet our business needs, and often sees the combination of multiple buttons, such as a small set of icon buttons in a rich text editor. So in this section, we mainly introduce the bootstrap framework to provide you with the button group components.

SOURCE query:

The button group is also a stand-alone 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: Corresponding bootstrap.css file No. 3131 line ~ No. 3291 Line

How to use:

Button groups and Drop-down menu components, you need to rely on the Button.js plug-in to function properly. But we can also just call bootstrap.js files directly. Because this file has integrated the Button.js plug-in functionality.

For structural aspects, it's very simple. Use a container called "btn-group" to put multiple buttons into this container. As shown below:

<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-fast-backward" ></span></button> <button type= "button" class= "btn Btn-default "><span class=" Glyphicon glyphicon-backward "></span></button> <button type=" Button "class=" btn btn-default "><span class=" Glyphicon glyphicon-play "></span></button> < Button type= "button" class= "btn btn-default" ><span class= "Glyphicon glyphicon-pause" ></span></ button> <button type= "button" class= "btn btn-default" ><span class= "Glyphicon glyphicon-stop" ></ span></button> <button type= "button" class= "btn btn-default" ><span class= "Glyphicon" Glyphicon-forward "></span></button> <button type=" button "class=" Btn Btn-default "><span class= "Glyphicon glyphicon-fast-forward" ></span></button> <button type= "button" class= " BTN Btn-default "><span class=" Glyphicon glyphicon-step-forward "></span></button> </div>

The results of the operation are as follows:

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

Button group to achieve the 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;
}

As we can see from the effect diagram, the four corners of the button group are rounded (browsers that support CSS3). But some friends will ask, we usually make a page when each button is rounded corner, and in the button group button, in addition to the first and last with the edge of the rounded corner, the other buttons do not have rounded corners, How does it come true? In fact, the implementation method is very simple:

• 1, the default all buttons have rounded corners
• 2, except the first button and the last button (except the Drop-down button), all the other buttons to remove the fillet effect
• 3, the first button to leave the upper left corner and the lower left corner is rounded corner
• 4, the last button left only the upper right corner and the lower right corner is 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;
}

2, Button (Button toolbar)

In a rich text editor, group groups of button groups, such as copying, cutting, and pasting a set of left, middle, right, and justified groups, as shown in the following illustration:

The Bootstrap Frame button toolbar also provides a way to make 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 principle of implementation is to allow multiple grouped "btn-group" elements of the container to float, and the group and group to maintain a 5px left outer margin. The code is as follows:

/source Please refer to bootstrap.css file line No. 3162 ~ No. 3173 Line/

. 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 the "Btn-toolbar".

/source Please refer to line No. 5062 of bootstrap.css File/

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

The operation effect is as follows:

Button group Size setting

In the Introduction button section, we know that the buttons change the button size by adjusting the padding, font-size, line-height, and Border-radius property values through 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

You can get a group of buttons of different sizes simply by appending the corresponding class name to the ". Btn-group" class name. As shown below:

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

Implement the button group size effect style code as follows:

/source Please refer to bootstrap.css file line No. 2320 ~ No. 2340 Line/

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

3, button (nested grouping)

Most of the time, we often put the Drop-down menu and the normal button group together, to achieve similar to the navigation menu effect. As shown below:

When you use it, simply replace the "dropdown" container of the original Pull-down menu with "Btn-group" and put it on the same level as the regular button. As shown below:

<div class= "Btn-group" >
 <button class= "Btnbtn-default" type= "button" > Home </button>
 < Button class= "Btnbtn-default" type= "button" > Product show </button>
 <button class= "Btnbtn-default" type= " Button "> Case Analysis </button>
 <button class=" Btnbtn-default "type=" button "> contact us </button>
 <div class= "Btn-group" >
 <button class= "Btnbtn-default dropdown-toggle" data-toggle= "dropdown" 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>

Implemented Style code:

/view Bootstrap.css file line No. 3192 ~ No. 3223 Line/

 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-t
 oggle {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; }

4, button (vertical grouping)

For the example shown earlier, the button groups are displayed horizontally. But in the actual application, always encounter the effect of vertical display. This style is also provided in the bootstrap framework. All we need to do is to change the "Btn-group" class name of the horizontal group into "btn-group-vertical".

The effect of the operation is as follows:

To implement the style code for vertical grouping:

/Please view Bootstrap.css file line No. 3234 ~ No. 3276 Line/

Btn-group-vertical > Btn,. btn-group-vertical > Btn-group,. btn-group-vertical > Btn-group >. btn {disp
 Lay:block;
 Float:none;
 width:100%;
max-width:100%; }. btn-group-vertical > Btn-group >. btn {float:none; btn-group-vertical >. btn +. BTN,. Btn-group-vertica
 L > 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:f
 Irst-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-vert ical > 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;
 }

and the horizontal Group button is not the same:

☑ Horizontal Group button The first button has rounded corners in the upper-left and lower-left corners, and the upper-right and lower-right corners of the last button have rounded corners

☑ Vertical Group button The top-left and upper-right corner of the first button has rounded corners and the bottom-left and lower-right corners of the last button have rounded corners

5, button (divided button)

The effect of the divide button is particularly practical on the mobile end. The entire button group width is 100% of the container, and each button inside the button group splits the width of the entire container. For example, if you have five buttons in the button group, each button is 20% width, and if there are four buttons, then each button is 25% width, and so on.

The divide-and-drop button is also often called the Adaptive Group button, and its implementation is very simple, just append a "btn-group-justified" class name to the button group "Btn-group", as follows:

Copy Code code as follows:

<div class= "Btn-group btn-group-justified" ></div>

The operation effect is as follows:

The implementation principle is very simple, the "btn-group-justified" is modeled as a table (display:table), and the inside button is modeled as a table cell (Display:table-cell). The specific style code is as follows:

/source Please view the Bootstrap.css file line No. 3277 ~ No. 3291 Line/

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

Special statement: When making a button group, try to use the <a> tag elements to make the button, because using the <button> tag elements, using display:table in the partial browser support is not friendly.

6. Button Pull-down Menu

The button Pull-down menu is basically the same as the look and drop down menu described in the previous section. The difference is that a button (. btn) style effect is encapsulated on the basis of a common drop-down menu. The simple point is that clicking a button will show the Hidden drop-down menu.

The button Pull-down menu is actually a normal pull-down menu, except that the "<a>" tag element is replaced with the "<button>" tab element. The only difference is that the external container "Div.dropdown" is replaced by "Div.btn-group". As shown below:

<div class= "Btn-group" > <button class= "btn" Btn-default "Dropdown-toggle" data-toggle= "dropdown"
 Button "> button pull-down menu <span class=" Caret "></span></button>
 <ul class=" Dropdown-menu ">
 <li><a href= "# #" > button drop-down menu item </a></li>
 <li><a href= "# #" > button drop-down menu item </a ></li>
 <li><a href= "# #" > button pull-down menu item </a></li>
 <li><a href= "# #" > Button drop-down Menu items </a></li>
 </ul>
</div>

Implement the style code as follows:

/view Bootstrap.css file line No. 3204 ~ No. 3223 Line/

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

The effect of the operation is as follows:

7, the button downwards up triangle

The downward triangle of the button, we add a "<span>" label element to the <button> tab and name it "caret":

Copy Code code as follows:

<button class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" type= "button" > button pull-down menu <span class= " Caret "></span></button>

This triangle is entirely implemented through CSS code:

/source Please view the Bootstrap.css file line No. 2994 ~ No. 3003 Line/

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

In addition, the triangle "caret" in the button has done some style processing:

/Source view Bootstrap.css file line No. 3224 ~ No. 3233 Line/

. btn. Caret {
 margin-left:0;
}
. Btn-lg. Caret {
 border-width:5px 5px 0;
 border-bottom-width:0
}
. Dropup. Btn-lg. Caret {
 border-width:0 5px 5px;
}

Sometimes our Pull-down menu will bounce up, this time our triangular direction needs to be displayed, the implementation method: Need to append "Dropup" class name on ". Btn-group" Class (This is also the class name to be used for pulling up the Drop-down menu).

/source Please view the Bootstrap.css file line No. 3109 ~ No. 3114 Line/

. Dropup. Caret,
Navbar-fixed-bottom dropdown. Caret {
 content: "";
 border-top:0;
 BORDER-BOTTOM:4PX solid;
}

As you can see in the code above, the difference between the up triangle and the downward triangle is that it actually changes a border-bottom value.

Here is an example of bouncing up the menu:

<div class= "Btn-group dropup" > <button class= "btn btn-default dropdown-toggle" data-toggle= "dropdown"
 Type= button > Drop-down menu <span class= "Caret" ></span></button>
 <ul class= "Dropdown-menu" >
 <li><a href= "# #" > button pull-down menu item </a></li>
 <li><a href= "# #" > button Pull-down Item </a></li>
 <li><a href= "# #" > button pull-down menu item </a></li>
 <li><a href= " # # > button drop-down menu item </a></li>
 </ul>
</div>

The operation effect is as follows:

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is about the Bootstrap button Group toolbar of all the content, I hope to help you learn.