El menú desplegable se utiliza para mostrar un menú contextualizado y toglable de la lista de enlaces.
1. Caso
Envuelva el disparador del menú desplegable y el menú desplegable en .dropdown, y luego agregue el código HTML que compone el menú.
<Div> <Botton type = "Button" id = "DropDownMenu1" Data-Toggle = "desplegable"> desplegable <span> </span> </boton> <ul role = "menú" aria-labelledby = "desplegablemenu1"> <li rol = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"#"#"/acción <a> </li li> < rol = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> otra acción </a> </li> <li role = "presentación"> <a rol = "menuitem" tabindex = "-1" href = "#"> algo más aquí </a> </li> <li rol = "presente"> </li> <li <li presente " tabindex = "-1" href = "#"> enlace separado </a> </li> </ul> </div>
Puede encontrar a través del código anterior que puede haber muchas clases o atributos de estilo desconocido.
Hay un botón desplegable y un pequeño icono careto en el lado derecho. Por supuesto, el texto de este pequeño icono y botón es del mismo nivel.
Primero, veamos que hay un toggle desplegable en el botón del botón y un atributo de toggle de datos. La lista aparecerá en función de este atributo.
Inmediatamente después, el menú desplegable de la etiqueta UL debe usarse junto con la clase desplegable de la clase de estilo del botón de arriba, y unir el botón de arriba a través de Aria Labeledby.
A continuación, hay un divisor en la cuarta etiqueta Li que en realidad es una clase de estilo para líneas divisorias.
Tal vez entiendo de esta manera, pero definitivamente no lo entiendo correctamente.
2. Opciones de alineación
Agregue .Text-Right al menú desplegable.
<Div> <Botton type = "Button" id = "DropDownMenu1" Data-Toggle = "desplegable"> desplegable <span> </span> </boton> <ul role = "menú" aria-labelledby = "desplegablemenu1"> <li rol = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"#"#"/acción <a> </li li> < rol = "Presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> otra acción </a> </li> <li role = "presentación"> <a rol = "menuitem" tabindex = "-1" href = "#"> algo más aquí </a> </li> <li rol = "presente"> </li> <li <li presente " tabindex = "-1" href = "#"> enlace separado </a> </li> </ul> </div>
Simplemente agregue una clase de estilo de texto de texto a la etiqueta UL en el código anterior.
3. Título
Se puede marcar un conjunto de acciones agregando un título en cualquier menú desplegable.
<h1> menú desplegable </h1> <div> <botón type = "botón" id = "desplegable" "data-toggle =" desplegable "> desplegable <span> </span> </boton> <ul role =" menú "aria-labelledbybyby tabindex = "-1" href = "#"> Action </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> otra acción </a> </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"#"#">#"#"#">#" role = "Presentation"> </li> <li role = "Presentation"> Dropsewdow Header </li> <li role = "presentación"> <a role = "menuitem" tabindex = "-1" href = "#"> enlace separado </a> </li> </ul> </div>
Lo principal es agregar una clase de estilo .dropdown-header en <li role = "presentación"> encabezado desplegable </li>.
4. Elementos del menú discapacitado
Agregue .disable a <li> en el menú desplegable para deshabilitar el enlace.
Continúe modificando el código anterior para reemplazar el código en la línea de otra cosa aquí
Copie el código de la siguiente manera: <li role = "presentación"> <a rol = "menuitem" tabindex = "-1" href = "#"> algo más aquí </a> </li>
Agregue principalmente clases de estilo .disable en la etiqueta Li.
Después de ejecutarlo, puede ver el efecto. De hecho, el efecto es similar al estilo de título anterior. Cuando haga clic, se mostrará un icono deshabilitado.
5. Casos básicos
1) Menú desplegable de tipo botón
Coloque cualquier botón en el grupo .btn y agregue la marca de menú correcta para hacer un activador de menú desplegable.
Menú desplegable de un solo botón
Simplemente cambie algunas marcas básicas y convierta el botón en un interruptor de menú desplegable.
<div> <button type="button" data-toggle="dropdown"> Action <span></span> </button> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li> <a href = "#"> enlace separado </a> </li> </ul> </div>
Menú desplegable del botón dividido
Del mismo modo, el menú desplegable del botón dividido requiere la misma marca de cambio, pero solo un botón más separado.
<div> <button type="button">Action</button> <div> <button type="button" data-toggle="dropdown"> <span></span> <span>Toggle Dropdown</span> </button> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href = "#"> algo más aquí </a> </li> <li> </li> <li> <a href = "#"> enlace separado </a> </li> </div> </div
Solo puede hacer clic en el pequeño icono para aparecer.
2) Tamaño
El botón de menú desplegable se aplica a botones de todos los tamaños.
<div> <button type = "button" data-toggle = "desplegable"> botón grande <span> </span> </boton> <ul> ... </ul> </div> <!-grupo de botones pequeños-> <div> <button type = "button" data-toggle = "retraso"> botón pequeño <pan> </span> </button> <ul> ... </ ul> </sp> <Div> <Div> <shiv> <bube "-Button <Div> Button"-Button <"Button" Button <"Div> Button <" Div> Button "Button <" Button ". data-toggle = "desplegable"> botón extra pequeño <span> </span> </boton> <ul> ... </ul> </div>
Controle el tamaño del botón a través de las clases de estilo .BTN-LG, .BTN-SM y .BTN-XS.
3) Menú emergente ascendente
Agregar .dropup al elemento principal hará el menú desplegable activado sobre el elemento.
<Div> <Botton type = "Button"> Drowp </boton> <Button type = "Button" data-toggle = "desplegable"> <span> </span> <span> Toggle desplegable </span> </button> <ul> <!-enlaces de menú desplegable-> </ul> </div>
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Este artículo presenta principalmente el contenido relevante del menú desplegable y luego presenta la combinación de botones y menús desplegables. Hay muchos cambios y el estilo también es bueno. Espero que a todos les guste.