Bootstrap drop-down menu and bootstrap drop-down menu

Bootstrap drop-down menu and bootstrap drop-down menu
Previous

The pull-down menu is basically the same as the pull-down menu. The difference is that a general drop-down menu is a block element, while a pay-as-you-go drop-down menu is an inline-block element. This topic describes the Bootstrap pay-as-you-go drop-down menu in detail.

 

Overview

The pull-down menu is actually a normal drop-down menu. The only difference is that the external container "div. dropdown" is changed to "div. btn-group", and the display is changed from block to inline-block.

<Div class = "btn-group"> <button type = "button" class = "btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup =" true "aria-expanded =" false "> <span class =" caret "> </span> </button> <ul class =" dropdown-menu "> <li> <a href = "#"> Action </a> </li> <a href = "#"> Another action </a> </li> <li> <a href = "#"> Something else here </a> </li> <li role = "separator" class = "divider"> </li> <li> <a href = "#"> Separated link </a> </li> </ul> </div> <div class = "dropdown"> <button type = "button" class = "btn-default dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false"> normal drop-down menu <span class = "caret"> </span> </button> <ul class = "dropdown-menu"> <li> <a href = "#"> Action </> </li> <a href = "#"> Another action </a> </li> <a href = "#"> Something else here </a> </li> <li role = "separator" class = "divider"> </li> <a href = "#"> Separated link </ a> </li> </ul> </div>

 

Up

Some menus need to be popped up. For example, the menu is at the bottom of the page, and there is a drop-down menu in this menu. In order to provide a better user experience, you have to bring up the drop-down menu. In the Bootstrap framework, a class name "dropup" is proposed for this effect. You only need to add this class name on "btn-group ".

[Triangle]

By default, the button is down by adding a "<span>" tag element to the <button> tag and naming it "caret"

<Button class = "btn-default dropdown-toggle" data-toggle = "dropdown" type = "button">
Button drop-down menu
<Span class = "caret"> </span>
</Button>

This triangle is completely implemented using CSS code.

.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:

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

If the triangle direction needs to be displayed upwards, you need to append the "dropup" class name to the btn-group class. The difference between the up triangle and the down triangle is that it actually changes the value of a border-bottom.

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

<Div class = "btn-group dropup" style = "margin-top: 140px "> <button class =" btn-default dropdown-toggle "data-toggle =" dropdown "type =" button "> button drop-down menu <span class =" caret "> </span> </button> <ul class = "dropdown-menu"> <li> <a href = "#"> button drop-down menu item </a> </ li> <a href = "#"> button drop-down menu item </a> </li> <a href = "#"> button drop-down menu item </a> </li> <a href = "#"> button drop-down menu item </a> </li> </ul> </ div>

 

Split

The split button drop-down menu is actually to artificially split the button and triangle, so that there is only one separate button.

<div class="btn-group">  <button type="button" class="btn">Action</button>  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    <span class="caret"></span>  </button>  <ul class="dropdown-menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div>

 

Dimensions

All Size buttons, including btn-xs, btn-lg, and btn-sm, are applicable to the drop-down menu. Of course, you can change the button size in the general drop-down list.

<div class="btn-group">  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Extra small button <span class="caret"></span>  </button>  <ul class="dropdown-menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>  </ul></div><div class="btn-group">  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Large button <span class="caret"></span>  </button>  <ul class="dropdown-menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>  </ul></div><div class="btn-group">  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    small button <span class="caret"></span>  </button>  <ul class="dropdown-menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>  </ul></div>

 

Last

For some extended usage of the general drop-down list, such as the separation line, separation line, alignment mode, and menu item status, the click-to-click drop-down menu is also supported. Therefore, I personally think it is a little redundant to set the drop-down menu component based on the bootstrap method. It is only the difference between block and inline-block, but there is no difference in function.