Bootstrap Menús desplegables (Dropdowns)
Este capítulo se centrará en los menús desplegables de Bootstrap. Los menús desplegables son conmutables y son menús contextuales que muestran enlaces en formato de lista. Esto se puede lograr mediantela interacción con el complemento de JavaScript para menús desplegables (Dropdown).
Para usar un menú desplegable, solo necesita en el atributo class.dropdownagregar la clase de menú desplegable. El siguiente ejemplo demuestra un menú desplegable básico:
Ejemplo
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Tema<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Minería de datos</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Comunicación de datos/Redes</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Enlace separado</a>
</li>
</ul>
</div>
Pruébalo »
El resultado se muestra a continuación:
Opciones
Alineación
Mediante.dropdown-menula adición de la clase.pull-rightse puede alinear a la derecha el menú desplegable.
Ejemplo
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Tema<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Minería de datos</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Comunicación de datos/Redes</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Enlace separado</a>
</li>
</ul>
</div>
Pruébalo »
El resultado se muestra a continuación:
Título
Puede usar la clasedropdown-headerpara agregar un título al área de etiqueta del menú desplegable.
Ejemplo
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Tema<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Título del menú desplegable</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Minería de datos</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Comunicación de datos/Redes</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Título del menú desplegable</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Enlace separado</a>
</li>
</ul>
</div>
Pruébalo »
El resultado se muestra a continuación:
Más ejemplos
| Clase |
Descripción |
Ejemplo |
| .dropdown |
Especifica que los menús desplegables están envueltos en .dropdown |
Pruébalo |
| .dropdown-menu |
Crear un menú desplegable |
Pruébalo |
| .dropdown-menu-right |
Menú desplegable alineado a la derecha |
Pruébalo |
| .dropdown-header |
Agregar un título en el menú desplegable |
Pruébalo |
| .dropup |
Especifica un menú desplegable que se abre hacia arriba |
Pruébalo |
| .disabled |
Elementos deshabilitados en el menú desplegable |
Pruébalo |
| .divider |
Divisores en el menú desplegable |
Pruébalo |
Otras extensiones
