Every day, Bootstrap must learn the button _ javascript tips-js tutorial

Every day, Bootstrap must learn the button group toolbar. This article describes the most commonly used button group toolbar. If you are interested, refer to it. 1. Buttons (button group)

The use of a single button on a Web page sometimes does not meet our business needs. It is often seen that multiple buttons are combined for use, such as a group of small icon buttons in the rich text editor. In this section, we will introduce the button group components provided by the Bootstrap framework.

Source code query:

The button group is also an independent component, so you can find the corresponding source code file:

☑LESS version: the source file is buttons. less.

☑Sass version: The corresponding source file is _ buttons. scss.

☑CSS version: Line 3 to the bootstrap.css File ~ 3,291st rows

Usage:

Like the drop-down menu component, a button group must depend on the button. js plug-in for normal operation. However, we can just call the bootstrap. js file. This file has integrated the button. js plug-in function.

The structure is very simple. Use a container named "btn-group" to put multiple buttons in the container. As follows:

The running effect is as follows:

In additionYou can also use other tag elements, such as tags. The only thing to ensure is that, no matter what label is used, the label element in the ". btn-group" container must contain the Class Name ". btn ".

The source code for button group implementation is as follows:

/Bootstrap.css file 3,131st lines ~ 3,161st rows /. 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 above, the four corners of the button group are rounded corners (browsers supporting CSS3), but some friends will ask, when we create a webpage, each button is rounded, in the button group, except the first and last button with the rounded corner on the edge, other buttons have no rounded corner. How does it implement it? In fact, the implementation method is very simple:

• 1. By default, all buttons have rounded corners
• 2. Except the first button and the last button (except the drop-down button), all other buttons cancel the rounded corner effect.
• 3. The first button is rounded only at the upper left and lower left corner.
• 4. The last button is rounded only at the upper right and lower right corner.

The source code is as follows:

/Bootstrap.css file 3,174th lines ~ 3,203rd rows/

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

In the rich text editor, you can group buttons, such as copy, cut, and paste buttons. Align left, center, right, and both ends, as shown in:

The Bootstrap framework button toolbar also provides such a method. You only need to put the button group "btn-group" in a large container "btn-toolbar" by group, as follows:

 
 … 
 
 … 
 
 … 
 
 … 

The implementation principle is to let the "btn-group" elements of multiple groups of the container float, and keep the left outer margin of 5px before the group and the group. The Code is as follows:

/Check the source code for the 3,162nd rows of the bootstrap.css file ~ 3,173rd rows/

.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 floating is cleared on "btn-toolbar.

/Check the source code for the bootstrap.css file line 5,062nd/

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

The running effect is as follows:

Button group size settings

In the introduction button section, we know that the button uses the btn-lg, btn-sm, and btn-xs class names to adjust the padding, font-size, line-height, and border-radius attribute values to change the button size. We can also use a similar method for the size of the button group:

☑. Btn-group-lg: -- large button group

☑. Btn-group-sm: -- small button group

☑. Btn-group-xs: -- ultra-small button group

You only need to append the corresponding class name to the ". btn-group" class name to obtain button groups of different sizes. As follows:

 
 … 
 
 … 
 
 … 
 
 … 

The code for implementing the style of button group size effect is as follows:

/Check the source code for the 2320th rows of the bootstrap.css file ~ 2340th rows/

.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. Buttons (nested groups)

In many cases, we usually arrange drop-down menus and normal button groups together to achieve the similar effect of navigation menus. As follows:

When using this function, you only need to replace the "dropdown" container created in the drop-down menu with "btn-group" and put it at the same level as the normal button. As follows:

Homepage Product presentation Case Analysis Contact us

About us

• Company Profile
• Enterprise Culture
• Organizational Structure
• Customer Service

Implementation style code:

/Bootstrap.css file 3,192nd lines ~ 3,223rd rows/

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

4. Buttons (vertical grouping)

As shown in the preceding example, the button groups are displayed horizontally. However, in actual use, the vertical display effect is always displayed. This style is also provided in the Bootstrap framework. We only need to replace the class name "btn-group" of the horizontal group with "btn-group-vertical.

The running result is as follows:

Code for implementing vertical grouping:

/Please refer to the 3,234th lines of the bootstrap.css file ~ 3,276th rows/

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

Unlike the horizontal grouping button:

☑The upper left and lower left corner of the first button of the horizontal grouping button have rounded corners, and the upper right and lower right corner of the last button have rounded corners.

☑Vertical grouping button the first button has a rounded corner in the upper left and upper right corner, and the last button in the lower left and lower right corner has a rounded corner

5. Button (equals button)

The effect of the equals button is particularly useful on mobile terminals. The width of the entire button group is 100% of the container, and each button in the button group shares the width of the entire container. For example, if you have five buttons in the button group, each button is 20% in width. If there are four buttons, each button is 25% in width, and so on.

The equals button is also called an adaptive grouping button, and its implementation method is also very simple, you only need to append a "btn-group-justified" class name to the button group "btn-group", as shown below:

The Code is as follows:

The running effect is as follows:

The implementation principle is very simple. It simulates "btn-group-justified" into a table (display: table), and simulates the buttons in it into a table cell (display: table-cell ). The specific style code is as follows:

/For the source code, refer to the 3,277th lines of the bootstrap.css file ~ 3,291st rows/

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

Note: When creating an equals button group, try to use the Tag Element to make the button, becauseWhen using label elements, using display: table is not supported in some browsers.

6. Button drop-down menu

The button drop-down menu is basically the same as the drop-down menu described in the previous section. The difference is that the button (. btn) style effect is encapsulated based on the general drop-down menu. Simply put, click a button to display the hidden drop-down menu.

The button drop-down menu is actually a normal drop-down menu, but the "" label element is changed to"

"Tag element. The only difference is that the external container "p. dropdown" is changed to "p. btn-group ". As follows:

Button drop-down menu

• Button drop-down menu item
• Button drop-down menu item
• Button drop-down menu item
• Button drop-down menu item

The implementation style code is as follows:

/Bootstrap.css file 3,204th lines ~ 3,223rd rows/

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

The running result is as follows:

7. Downward upward triangle of the button

The downward triangle of the button.Add a "" tag element to the tag and name it "caret ":

The Code is as follows:

Button drop-down menu

This triangle is completely implemented using CSS code:

/For the source code, refer to the 2,994th lines of the bootstrap.css file ~ 3,003rd rows/

.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 is processed in a certain style:

/Source Code bootstrap.css file 3,224th lines ~ 3,233rd rows/

.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, the drop-down menu will pop up. In this case, we need to display the triangle in the upward direction. The implementation method is as follows: append the "dropup" class name to the btn-group class (this is also the name of the class used for the pop-up drop-down menu ).

/For the source code, refer to the 3,109th lines of the bootstrap.css file ~ 3,114th rows/

.dropup .caret,.navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px solid;}

The code above shows the difference between the up triangle and the down triangle: it actually changes the value of a border-bottom.

The following is an example of a menu popped up:

 Button drop-down menu 
 
 
 
  
  
Button drop-down menu item
 
  
  
Button drop-down menu item
 
  
  
Button drop-down menu item
 
  
  
Button drop-down menu item
 
 
 

The running effect is as follows:

The above is all about the toolbar of the Bootstrap button group. I hope it will help you with your learning.