desplegable básico
Un menú desplegable es un menú conmutable que permite al usuario elegir un valor de una lista predefinida:
Ejemplo
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Inténtalo tú mismo " ejemplo Explicación
El .dropdown clase consiste en un menú desplegable.
Para abrir el menú desplegable, utilice un botón o un enlace con una clase de .dropdown-toggle y la data-toggle="dropdown" atributo.
El .caret clase crea un icono de cursor de flecha ( ) ( ) ( ) , Lo que indica que el botón es un menú desplegable.
Añadir la .dropdown-menu clase a un <ul> elemento para realmente crear el menú desplegable.
Divisor desplegable
El .divider clase se utiliza para enlaces separados dentro del menú desplegable con un borde horizontal delgada:
Cabecera desplegable
El .dropdown-header clase se utiliza para agregar encabezados dentro del menú desplegable:
Desactivar un elemento
Para desactivar un elemento en el menú desplegable, utilice el .disabled clase:
Posición desplegable
Para alinear el botón derecho del desplegable, añadir el .dropdown-menu-right clase para el elemento con .dropdown-menú:
Caer hasta
Si desea que el menú desplegable para expandir hacia arriba en vez de hacia abajo, cambiar el <div> elemento con class="dropdown" a "dropup" :
Accesibilidad desplegable
Para ayudar a mejorar la accesibilidad para las personas que utilizan lectores de pantalla, debe incluir la siguiente role y aria-* atributos, al crear un menú desplegable:
Ejemplo
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Bootstrap completar desplegable Referencia
Para una referencia completa de todas las opciones desplegables, métodos y eventos, visite nuestro Bootstrap JS desplegable de referencia .