Cómo anidar grupos de botones y crear menús desplegables en Bootstrap 5?
Los grupos de botones pueden desempeñar un papel importante si desea envolver botones interrelacionados que representen múltiples acciones conectadas juntas. Además, estos grupos de botones se pueden anidar para generar menús desplegables que resultan útiles en situaciones cuando desea proporcionar a su usuario múltiples opciones.
Antes de saltar sobre cómo generar menús desplegables mediante los grupos de botones de anidación, comprendamos rápidamente cómo se pueden agrupar los botones.
Cómo crear grupos de botones usando Bootstrap 5
Con el fin de agrupar los botones, debe asignar un .grupo btn Clase al contenedor Div envolviendo los botones. Además, si desea diseñar estos grupos de botones, use el .clase BTN junto con clases de color contextuales. El .btn La clase ofrece un estilo básico a los grupos, mientras que las clases de color contextuales se utilizan para proporcionar un color de fondo a los grupos de botones.
Html
El fragmento de código generará cuatro botones agrupados, cada botón tiene un relleno definitivo, un fondo verde y un color blanco de texto.
Producción
Así es como puedes agrupar los botones juntos usando Bootstrap 5.
Ahora pasaremos al tema principal en discusión como lo indica el título del artículo, que es cómo los grupos de botones pueden anidadarse para generar menús desplegables.
Cómo anidar botones agrupados para generar menús desplegables
Desea anidar grupos de botones para hacer un menú desplegable en varios escenarios, como cuando desea proporcionar múltiples opciones al usuario para elegir. El ejemplo demostrado a continuación muestra cómo puede realizar esta tarea.
Html
Ejemplo explicado
El código de arriba genera dos grupos de botones, cada uno que consisten en un solo botón y cada botón tiene un menú desplegable asociado con él.
El primer grupo de botones tiene un menú desplegable asociado con él que se creó al asignar el .clase desplegable a una lista desordenada y se hizo toglable asignando el .toggle desplegable clase y al elemento y establece su data-bs-toggle = "desplegable". Para insertar varias opciones dentro de la etiqueta de anclaje del menú desplegable, se anidadó dentro de un
El segundo menú desplegable vinculado al segundo grupo de botones también se creó de manera similar.
Producción
Usando esta técnica, puede crear un menú desplegable agrupando los botones.
Conclusión
Para crear un menú desplegable mediante la anidación de los grupos de botones, enlace un menú desplegable con un grupo de botones asignando el .clase desplegable a
- elemento y para insertar elementos dentro de la etiqueta de nido de menú interior
- elemento y proporcionar el .ítem desplegable clase a la etiqueta de anclaje. Además, para hacer que el menú se alineable, asigne el .clase desplegable al elemento y establecer su data-bs-toggle = "desplegable". Después de estos pasos, podrá generar fácilmente menús desplegables mediante grupos de botones de anidación.