Bootstrap - Groupes de Boutons : Un Guide Pour Les Débutants

Bonjour, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des Groupes de Boutons Bootstrap. En tant que votre professeur d'informatique du coin, je suis excité de vous guider dans cette aventure. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons commencer par les bases et progresser pas à pas. C'est parti !

Bootstrap - Button Groups

Qu'est-ce que les Groupes de Boutons ?

Avant de nous lancer dans le code, comprenons ce qu'est un groupe de boutons. Imaginez que vous créez une télécommande pour une télévision. Plutôt que d'avoir tous les boutons éparpillés, vous regroupez les boutons similaires ensemble. C'est exactement ce que nous faisons en conception web avec les groupes de boutons !

Les groupes de boutons dans Bootstrap nous permettent de regrouper des boutons liés, créant une interface plus organisée et visuellement plus attractive. C'est comme donner à vos boutons un petit coin confortable où ils peuvent vivre en harmonie.

Exemple de Base

Commençons par un exemple simple pour nous familiariser :

<div class="btn-group" role="group" aria-label="Exemple de base">
<button type="button" class="btn btn-primary">Gauche</button>
<button type="button" class="btn btn-primary">Milieu</button>
<button type="button" class="btn btn-primary">Droite</button>
</div>

Ce code crée un groupe de trois boutons étiquetés "Gauche", "Milieu" et "Droite". Decomposons-le :

Nous enveloppons nos boutons dans un <div> avec la classe btn-group.
L'attribut role="group" aide les lecteurs d'écran à comprendre que ces boutons sont liés.
aria-label fournit une description pour le groupe de boutons.
Chaque <button> a les classes btn et btn-primary, qui leur donnent le style de bouton Bootstrap.

Lorsque vous exécutez ce code, vous verrez trois boutons bleus accolés comme des pois dans un pod !

Styles Mixtes

Maintenant, ajoutons un peu de piquant. Dans la vie réelle, tous les boutons ne sont pas créés égaux. Certains sont plus importants que d'autres, et nous pouvons le montrer visuellement :

<div class="btn-group" role="group" aria-label="Styles mixtes">
<button type="button" class="btn btn-danger">Supprimer</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-success">Approuver</button>
</div>

Dans cet exemple, nous utilisons différentes classes de couleurs Bootstrap :

btn-danger pour un bouton rouge "Supprimer"
btn-warning pour un bouton jaune "Avertissement"
btn-success pour un bouton vert "Approuver"

Cela crée un groupe de boutons visuellement frappant, chaque couleur codée selon sa fonction. C'est comme un feu de circulation pour votre page web !

Styles Contourés

Parfois, vous souhaitez que vos boutons soient un peu plus subtils. C'est là que les styles contourés deviennent utiles :

<div class="btn-group" role="group" aria-label="Styles contourés">
<button type="button" class="btn btn-outline-primary">Principal</button>
<button type="button" class="btn btn-outline-secondary">Secondaire</button>
<button type="button" class="btn btn-outline-info">Info</button>
</div>

En utilisant btn-outline-* au lieu de btn-*, nous obtenons des boutons avec des bords et du texte colorés, mais des arrière-plans transparents. Ils sont parfaits lorsque vous souhaitez une touche plus légère dans votre conception.

Groupes de Cases à Cocher et de Boutons Radio

Maintenant, passons à un peu plus d'interactivité. Bootstrap nous permet de créer des groupes de boutons qui agissent comme des cases à cocher ou des boutons radio :

<div class="btn-group" role="group" aria-label="Groupe de cases à cocher de base">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Case à cocher 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Case à cocher 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Case à cocher 3</label>
</div>

Ce code crée un groupe de trois boutons qui agissent comme des cases à cocher. Vous pouvez cliquer sur plusieurs boutons, et ils resteront "pressés" jusqu'à ce que vous les cliquiez à nouveau. C'est comme avoir une liste de tâches directement dans votre groupe de boutons !

Barre d'Outils

Parfois, vous devez regrouper vos groupes de boutons. C'est là que les barres d'outils entrent en jeu :

<div class="btn-toolbar" role="toolbar" aria-label="Barre d'outils avec groupes de boutons">
<div class="btn-group me-2" role="group" aria-label="Premier groupe">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Deuxième groupe">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="Troisième groupe">
<button type="button" class="btn btn-info">6</button>
</div>
</div>

Cela crée une barre d'outils avec trois groupes de boutons. C'est comme organiser vos ustensiles de cuisine - les fourchettes dans un tiroir, les cuillères dans un autre, et ce gadget étrange que votre tante vous a donné dans son propre endroit spécial.

Tailles

Comme les gens, les boutons existent en toutes tailles. Bootstrap rend simple le redimensionnement de votre groupe de boutons :

<div class="btn-group btn-group-lg" role="group" aria-label="Groupe de boutons large">
<button type="button" class="btn btn-outline-dark">Gauche</button>
<button type="button" class="btn btn-outline-dark">Milieu</button>
<button type="button" class="btn btn-outline-dark">Droite</button>
</div>

En ajoutant btn-group-lg au conteneur, nous rendons tous les boutons plus grands. Vous pouvez également utiliser btn-group-sm pour des boutons plus petits. C'est comme Goldilocks - vous pouvez trouver la taille qui convient le mieux !

Nesting

Parfois, vous avez besoin d'un groupe de boutons à l'intérieur d'un autre groupe de boutons. Bootstrap vous couvre :

<div class="btn-group" role="group" aria-label="Groupe de boutons avec dropdown imbriqué">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Lien du dropdown</a></li>
<li><a class="dropdown-item" href="#">Lien du dropdown</a></li>
</ul>
</div>
</div>

Cela crée un groupe de boutons avec deux boutons réguliers et un bouton dropdown. C'est comme ces poupées russes, mais avec des boutons !

Variante Verticale

Pour finir, tournons les choses de biais avec des groupes de boutons verticaux :

<div class="btn-group-vertical" role="group" aria-label="Groupe de boutons vertical">
<button type="button" class="btn btn-primary">Bouton</button>
<button type="button" class="btn btn-primary">Bouton</button>
<button type="button" class="btn btn-primary">Bouton</button>
<button type="button" class="btn btn-primary">Bouton</button>
<button type="button" class="btn btn-primary">Bouton</button>
</div>

En utilisant btn-group-vertical au lieu de btn-group, nous empilons nos boutons verticalement. C'est parfait lorsque vous souhaitez que vos boutons forment une tour plutôt qu'une ligne !

Conclusion

Et voilà, les amis ! Nous avons parcouru le territoire des Groupes de Boutons Bootstrap, des exemples de base aux variantes verticales. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces exemples. Mixez et assortez différents styles, tailles et layouts pour créer des groupes de boutons parfaits pour vos projets.

Le développement web est tout au sujet de la créativité et de la résolution de problèmes, et les groupes de boutons ne sont qu'un des nombreux outils à votre disposition. Continuez à apprendre, continuez à coder, et surtout, amusez-vous ! Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset