Bootstrap button component (2)-luowi three thousand

Bootstrap button component (2)-luowi three thousand Button drop-down menu

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