Comment créer un groupe de boutons Bootstrap 5 ?

Gauche

Milieu

Droite

` :ceci crée le conteneur du groupe de boutons. L'attribut `role="group"` indique que les boutons de ce conteneur font partie d'un groupe, et l'attribut `aria-label` fournit une description de l'objectif du groupe de boutons.

2. `Gauche ` :Cela crée le premier bouton du groupe. L'attribut `type="button"` spécifie que le bouton ne soumet pas de formulaire, et les attributs `class="btn btn-primary"` stylisent le bouton comme un bouton principal dans le thème par défaut de Bootstrap.

3. De même, les deux autres éléments `` créent les boutons du milieu et de droite avec le même style et les mêmes fonctionnalités.

Le groupe de boutons résultant ressemblera à ceci :

[Image d'un groupe de boutons avec trois boutons principaux intitulés « Gauche », « Milieu » et « Droite »]

Vous pouvez personnaliser le groupe de boutons en ajoutant des boutons supplémentaires, en changeant les styles des boutons et en modifiant l'attribut `aria-label` pour fournir une description différente.

Voici quelques options supplémentaires pour personnaliser les groupes de boutons :

* Pour aligner verticalement les boutons, ajoutez la classe `btn-group-vertical` au conteneur `

`.

* Pour créer un ensemble de boutons radio, ajoutez l'attribut de données `btn-group-toggle` au conteneur `

` et définissez l'attribut `role="radiogroup"` sur l'élément `` dans chaque ` `.

* Pour créer un ensemble de cases à cocher, ajoutez l'attribut de données `btn-group-toggle` au conteneur `

` et définissez l'attribut `role="checkboxgroup"` sur l'élément `` dans chaque ``.

* Pour désactiver un bouton, ajoutez l'attribut `disabled` à l'élément `

`.

Les groupes de boutons sont un composant polyvalent de Bootstrap 5 qui vous permet de créer facilement diverses configurations et styles de boutons.