Bootstrap button components _ javascript skills

Like the drop-down menu component, a button group must depend on the button. js plug-in for normal operation. This article describes the Bootstrap button components in detail. If you are interested, you can learn about the button group and the drop-down menu components. You need to rely on the button. js plug-in for normal operation.

Structure: Use a container named btn-group to put multiple buttons in the container.

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 rows ~ 3291 rows

…

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 additionYou can also use other tag elements, such as tags. The only thing you need to ensure is that, no matter what tags are used, the label elements in the. btn-group container must contain the class name. btn.

The four corners of the button group are rounded corners. Except for the first and last buttons that have the rounded corners on the edge, other buttons have no rounded corners.

Details:

1. Default: All buttons are rounded.

2. Except the first button and the last button, the rounded corner of other buttons is canceled.

3. The last button is rounded only in the upper right and lower right corner.

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 the rich text editor, group button groups, such as copying, cutting, and pasting a group, align left, align middle, align right, and align both ends, in this case, you need to use the bootstrap framework button tool bar btn-toolbar.

…
…
…
…

Principle: It mainly allows multiple groups of containers. btn-group elements to float and keep the left outer 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: Clear the float on the btn-toolbar.

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

Example:

Button nested Group

Most of the time, we arrange button groups that are very common in the drop-down menu to achieve the effect similar to that of the navigation menu:

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

HomepageProduct presentationCase AnalysisContact us
About us
 
 

  
  
Company Profile
  
  
Enterprise Culture
  
  
Organizational Structure
  
  
Customer Service
 
 
. 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 ;}

Vertical button group

You only need to replace Class Name. btn-group of the horizontal group with. btn-group-vertical.

HomepageProduct presentationCase AnalysisContact us
About us
 
 

  
  
Company Profile
  
  
Enterprise Culture
  
  
Organizational Structure
  
  
Customer Service
 
 
. 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 equals button is also called the adaptive grouping button:

The width of the entire button group is 100% of the container, and each button in the button group is equally divided into the width of the entire container. For example, a button group contains five buttons, each of which is 20% of the container width; A button group contains four buttons, each of which is 25% of the container width;

Implementation Method: you only need to append a class name. btn-group-justified to the button group. btn-group

  
   
Homepage
  
  
   
Case Analysis
  
  
   
Contact us
  
  
   
About us
  
. 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. btn-group-justified into a table (display: table), and simulate the button Template into a table cell (display: table-cell ).

Note: When creating an equals button group, try to use tags to create buttons, because display: table is not supported in some browsers when using button tag elements.

Recommended reading:

Bootstrap button

The above is the Bootstrap button component introduced by the editor. I hope it will help you!