Bootstrap button drop-down menu component details _ javascript skills

This article describes the Bootstrap button drop-down menu components in detail. if you are interested, you can refer to the button group as an independent component. The Button Group is the same as the drop-down menu component, depends on button. js plug-ins can operate normally.

Set a group

Combine one

Make more complex components.

 
  1  2  3  4  5  6 
 
  7  8 
 
  9 
 

The button drop-down menu is basically the same in appearance as the drop-down menu. The only difference between them is that the external container p. dropdown is changed to p. btn-group.

 Button drop-down menu 
 
  
  
Menu list 1
  
  
Menu list 2
  
  
Menu list 3
  
  
Menu list 4
  
  
Menu list 5
 
 
 

Bootstrap.css file

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

Downward upward triangle of the button

The downward triangle of the button is to add the span tag element to the button tag and the class name is. caret.

Button drop-down menu

The following figure shows the source code of bootstrap.css:

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

The above is all the content of this article, hoping to help you learn.