Desplegables
Last updated
Last updated
Bootstrap nos facilita la creación de botones con listas de opciones desplegables mediante la clase .dropdown. Este elemento requiere que el plugin JavaScript de Bootstrap esté incluido en la plantilla. La estructura básica para crear un elemento de este tipo es la siguiente:
Con lo que obtendríamos el siguiente resultado:
Sobre el botón principal podemos aplicar todos los colores de botones que hemos visto en la sección titulada "Botones", por ejemplo ".btn-success" o ".btn-danger". También podemos añadir los modificadores de tamaño ".btn-lg" y ".btn-sm" para aumentar o disminuir el tamaño del botón del desplegable.
Si nos fijamos en el código anterior, para el botón principal se ha usado la etiqueta "button" y para los elementos del desplegable la etiqueta "a", sin embargo podríamos haber usado solamente la etiqueta "a" o solamente la etiqueta "button", es decir, funcionan exactamente igual y su apariencia es la misma.
Los atributos que empiezan con "aria" son para crear contenido accesible, para que los lectores de pantalla pueden encontrar las etiquetas correctas a la hora de interpretar el contenido. Para más información consultar la documentación sobre HTML 5 ARIA.
Para alinear un menú a la derecha se puede añadir la clase .dropdown-menu-right a la lista "dropdown-menu", por ejemplo:
Para añadir un encabezado (o varios) y dividir en secciones un desplegable podemos utilizar la clase .dropdown-header de la siguiente forma:
Con lo que obtendremos:
También podemos añadir separadores en un desplegable mediante la clase .dropdown-divider de la forma:
Con lo que obtendríamos el siguiente listado con separador:
