TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer un groupe de boutons Bootstrap 5 ?

134

Le groupe de boutons, comme son nom l’indique, est simplement un groupe de boutons alignés pour les présenter comme un seul élément. Dans notre précédent didacticiel sur les boutons, nous avons expliqué comment créer des boutons avec des cases à cocher et des boutons radio en utilisant le concept de groupe de boutons. Dans ce didacticiel, expliquons différents types de groupes de boutons avec des exemples dans Bootstrap 5.

Tutoriel sur le groupe de boutons Bootstrap 5

Ce didacticiel couvre les chapitres suivants :

  1. Création d’un groupe de boutons horizontaux
  2. Barre d’outils du groupe de boutons
  3. Dimensionnement des groupes de boutons
  4. Groupe de boutons imbriqués avec liste déroulante
  5. Groupe de boutons vertical
  6. Groupe de boutons verticaux imbriqués

1 groupe de boutons horizontaux

Le groupe de boutons horizontal est la forme simple de regrouper deux ou plusieurs boutons ensemble. Créons un groupe de boutons de quatre boutons en utilisant la classe ".btn-group" avec une balise div. Chaque bouton utilise une classe contextuelle différente pour l’afficher dans différentes couleurs.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button Group --> <div class="btn-group" role="group" aria-label="Horizontal Button Group"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> <button type="button" class="btn btn-info">Button 4</button> </div> <!-- End of Button Group --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Le «role» et le «aria-label» sont facultatifs principalement utilisés du point de vue de l’accessibilité sur les lecteurs d’écran.

Cela produira le résultat suivant dans le navigateur.

Comment créer un groupe de boutons Bootstrap 5 ?

Le code ci-dessus est un code de modèle complet utilisant des liens CSS et de script CDN. Vous pouvez simplement remplacer le bloc entre le début et la fin du groupe de boutons par le code donné dans les exemples ci-dessous pour créer et tester différents styles de groupes de boutons.

Barre d’outils de groupe à 2 boutons

L’option de regroupement vous permet d’avoir un arrangement de type barre d’outils en ajoutant l’attribut add role="toolbar". Vous pouvez également utiliser un groupe de boutons avec des groupes de saisie pour créer des barres d’outils avec saisie de texte. L’exemple de code est donné ci-dessous :

<div class="btn-toolbar" role="toolbar" aria-label="Button Group Toolbar"> <div class="btn-group" role="group" aria-label="Button Group"> <button type="button" class="btn btn-primary">A</button> <button type="button" class="btn btn-warning">B</button> <button type="button" class="btn btn-info">C</button> <button type="button" class="btn btn-success">D</button> </div> <div class="input-group"> <span class="input-group-addon" id="id1">@</span> <input type="text" class="form-control" placeholder="This is input group box" aria-describedby="id1"> </div> </div>

Il produira le résultat suivant sur le navigateur :

Comment créer un groupe de boutons Bootstrap 5 ?

Comme vous pouvez le voir, les éléments du groupe de boutons et du groupe d’entrée n’ont pas d’espace. Vous devez utiliser un CSS personnalisé pour ajouter une marge entre ces deux éléments afin de les aligner correctement.

3 tailles différentes de groupes de boutons

Bootstrap 5 vous permet d’avoir trois classes de dimensionnement pour les grandes (btn-group-lg), les valeurs par défaut et les petites (btn-group-sm). Vous pouvez directement ajouter une classe grande ou petite à la classe ".btn-group" pour modifier la taille.

<!-- Start of Large Button Group Size --> <div class="btn-group btn-group-lg" role="group" aria-label="Large Button Group"> <button type="button" class="btn btn-primary">Large Button 1</button> <button type="button" class="btn btn-warning">Large Button 2</button> <button type="button" class="btn btn-danger">Large Button 3</button> </div> <!-- Start of Default Button Group Size --> <div class="btn-group" role="group" aria-label="Default Button Group"> <button type="button" class="btn btn-primary">Default Button 1</button> <button type="button" class="btn btn-warning">Default Button 2</button> <button type="button" class="btn btn-danger">Default Button 3</button> </div> <!-- Start of Small Button Group Size --> <div class="btn-group btn-group-sm" role="group" aria-label="Small Button Group"> <button type="button" class="btn btn-primary">Small Button 1</button> <button type="button" class="btn btn-warning">Small Button 2</button> <button type="button" class="btn btn-danger">Small Button 3</button> </div>

Le code ci-dessus produira les résultats comme indiqué ci-dessous :

Comment créer un groupe de boutons Bootstrap 5 ?

4 Création de groupes de boutons imbriqués avec liste déroulante

Les groupes de boutons imbriqués sont faciles à créer en plaçant la classe ".btn-group" dans une autre classe ".btn-group". De cette façon, vous pouvez afficher quelques boutons, puis une liste déroulante avec des liens supplémentaires.

<div class="btn-group" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-info">Button 2</button> <div class="btn-group" role="group"> <button id="nested1" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested1"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-info" href="#">Dropdown Link 2</a> </div> </div> </div>

Le résultat devrait ressembler à ci-dessous :

Comment créer un groupe de boutons Bootstrap 5 ?

5 groupes de boutons verticaux

Les boutons peuvent être regroupés verticalement en utilisant la classe ".vertical" avec la classe ".btn-group".

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> </div>

Le résultat du code devrait produire le groupe de boutons ci-dessous :

Comment créer un groupe de boutons Bootstrap 5 ?

Groupe de 6 boutons verticaux imbriqués

Semblable à l’imbrication horizontale, les groupes de boutons verticaux peuvent également être imbriqués avec une liste déroulante.

<div class="btn-group-vertical" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-secondary">Button 2</button> <div class="btn-group" role="group"> <button id="nested2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested2"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-danger" href="#">Dropdown Link 2</a> </div> </div> </div>

Voici à quoi ressemblera le résultat :

Comment créer un groupe de boutons Bootstrap 5 ?

Notez que les boutons fractionnés ne sont pas pris en charge dans l’imbrication verticale.


Apprendre Bootstrap 5 (Index )


Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails