Menú desplegable práctico de Bootstrap para componentes

El menú desplegable se usa ampliamente en la construcción de páginas web. Bootstrap se puede implementar simplemente llamando a varias clases y agregando atributos.
Ejemplo básico

Un menú contextual intercambiable para mostrar una lista de enlaces. El complemento de JavaScript para el menú desplegable lo hace interactivo.
Lo esencial es .dropdown .dropupla dirección del elemento padre para controlar el menú desplegable (abajo, arriba). Luego están los atributos del elemento y data-toggle="dropdown"finalmente especifique el class="dropdown-menu", aria-labelledby="dLabel"

código de instancia en la lista

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

Alinear

De forma predeterminada, el menú desplegable se coloca automáticamente al 100% de ancho a lo largo de los lados superior e izquierdo del elemento principal. Agregar a la clase de menú desplegable .dropdown-menu-rightpermite que el menú se justifique a la derecha.

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

título

Se puede marcar un grupo de acciones agregando un título en cualquier menú desplegable.

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

Línea divisoria

Agregue una línea divisoria al menú desplegable para agrupar varios enlaces.

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

Elementos de menú deshabilitados

Menú desplegable <li>para agregar el elemento tierra .disabled, deshabilitando así el elemento de menú apropiado. Es lo mismo que la clase en el estilo CSS

<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