Comment nicher des groupes de bouton et créer des menus déroulants dans Bootstrap 5?
Les groupes de boutons peuvent jouer un rôle important si vous souhaitez envelopper des boutons interdépendants qui représentent ensemble plusieurs actions. De plus, ces groupes de boutons peuvent être imbriqués pour générer des menus déroulants qui s'avèrent utiles dans les situations lorsque vous souhaitez fournir à votre utilisateur plusieurs choix.
Avant de sauter sur la façon de générer des menus déroulants par les groupes de boutons de nidification, comprenons rapidement comment les boutons peuvent être regroupés.
Comment créer des groupes de bouton à l'aide de bootstrap 5
Afin de regrouper les boutons, vous devez attribuer un .groupe BTN classe au conteneur div enroulant les boutons. De plus, si vous souhaitez styliser ces groupes de bouton .classe BTN avec des classes de couleurs contextuelles. Le .btn La classe donne un style de base aux groupes, tandis que les classes de couleurs contextuelles sont utilisées pour fournir une couleur d'arrière-plan aux groupes de boutons.
Html
L'extrait de code générera quatre boutons regroupés, chaque bouton ayant un rembourrage défini, un fond vert et une couleur de texte blanc.
Sortir
C'est ainsi que vous pouvez regrouper les boutons ensemble à l'aide de bootstrap 5.
Nous allons maintenant passer au sujet principal en discussion comme indiqué par le titre de l'article qui est de savoir comment les groupes de boutons peuvent être imbriqués pour générer des menus déroulants.
Comment nicher des boutons groupés pour générer des menus déroulants
Vous voudriez nicher des groupes de bouton pour faire un menu déroulant dans divers scénarios, comme lorsque vous souhaitez fournir plusieurs options à l'utilisateur pour choisir. L'exemple démontré ci-dessous montre comment vous pouvez effectuer cette tâche.
Html
Exemple expliqué
Le code ci-dessus génère deux groupes de bouton composés chacun en un seul bouton et chaque bouton a un menu déroulant qui lui est associé.
Le premier groupe de bouton a un menu déroulant associé qui a été créé en attribuant le .classe déroulante à une liste non ordonnée et a été rendu indemnisable en attribuant le .dropdown-toggle classe et à l'élément et définit son data-bs-toggle = "dropdown". Pour insérer diverses options à l'intérieur de la balise d'ancrage du menu déroulant a été imbriqué dans un
La deuxième liste déroulante liée au deuxième groupe de bouton a également été créée de manière similaire.
Sortir
En utilisant cette technique, vous pouvez créer un menu déroulant en regroupant les boutons ensemble.
Conclusion
Pour créer un menu déroulant par les groupes de bouton de nidification, liez ensemble un menu déroulant avec un (s) groupe (s) de bouton .classe déroulante pour
- élément et afin d'insérer des éléments à l'intérieur de la balise de nid de menu à l'intérieur
- élément et fournissez le .dropdown-item classe à la balise d'ancrage. De plus, pour rendre le menu bas .classe de dropdown-toggle à l'élément et définir son data-bs-toggle = "dropdown". Suite à ces étapes, vous pourrez facilement générer des menus déroulants par des groupes de bouton de nidification.