Bootstrap-practical drop-down menu for components

The drop-down menu is widely used in the construction of web pages. Bootstrap can be implemented simply by calling several classes and adding attributes.
Basic example

A switchable, contextual menu for displaying a list of links. The JavaScript plugin for the drop-down menu makes it interactive.
What is essential is .dropdown .dropupthe direction of the parent element to control the drop-down (down, up). Then there are the attributes of the element and data-toggle="dropdown"finally specify the class="dropdown-menu", aria-labelledby="dLabel"

instance code in the list

<div class="dropdown">
  <button id="dLabel"  data-toggle="dropdown">
    下拉菜单的承载
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <li><a href="#">下拉菜单的内容</a></li>
  </ul>
</div>

Align

By default, the drop-down menu is automatically positioned at 100% width along the upper and left sides of the parent element. Add to .dropdown-menu .dropdown-menu-rightclass lets menu right justified.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

title

A group of actions can be marked by adding a title in any drop-down menu.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Dividing line

Add a dividing line to the drop-down menu to group multiple links.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Disabled menu items

Pull-down menu <li>to add .disabled earth element, thereby disabling the appropriate menu item. This is the same as the class in the CSS style

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</u