Bootstrap - Boutons Démo

Salut à toi, future star du codage ! Aujourd'hui, nous plongeons dans le merveilleux monde des boutons Bootstrap. En tant que ton enseignant bienveillant en informatique du quartier, je suis là pour te guider dans cette aventure, étape par étape. Alors, prends ta boisson favorite, installe-toi confortablement, et partons ensemble dans cette aventure passionnante !

Bootstrap - Buttons Demo

Qu'est-ce que les Boutons Bootstrap ?

Avant de rentrer dans les détails, parlons de ce que sont vraiment les boutons Bootstrap. Imagine que tu construis une maison. Les murs et le toit sont ta structure HTML, la peinture est ton CSS, et Bootstrap ? Eh bien, c'est comme avoir une boîte à outils magique qui rend tout plus simple et plus joli. Les boutons Bootstrap sont des boutons pré-stylisés, prêts à utiliser, que tu peux ajouter facilement à tes pages web.

Premiers Pas avec Bootstrap

Première chose première, nous devons configurer notre terrain de jeu Bootstrap. Ne t'inquiète pas, c'est plus facile que de configurer une partie de Monopoly !

Étape 1 : Configurer la Structure HTML

Commençons par une structure HTML de base :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démo de Boutons Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Nos boutons iront ici -->
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

C'est comme préparer ta toile avant de peindre. Nous avons inclus les fichiers CSS et JS de Bootstrap, ce qui nous donne accès à tous les avantages de Bootstrap.

Boutons Bootstrap de Base

Maintenant, ajoutons quelques boutons à notre page !

<button type="button" class="btn btn-primary">Principal</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Succès</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Clair</button>
<button type="button" class="btn btn-dark">Sombre</button>

Voici ce que fait chaque classe :

btn: C'est la classe de base pour tous les boutons Bootstrap.
btn-primary, btn-secondary, etc. : Ces classes définissent la couleur et le style du bouton.

Tailles des Boutons

Tout comme tu peux obtenir différentes tailles de frites dans un restaurant de fast-food, les boutons Bootstrap existent également en différentes tailles !

<button type="button" class="btn btn-primary btn-lg">Bouton large</button>
<button type="button" class="btn btn-primary">Bouton par défaut</button>
<button type="button" class="btn btn-primary btn-sm">Bouton petit</button>

btn-lg: Rend le bouton plus grand
btn-sm: Rend le bouton plus petit

Boutons Contour

Parfois, tu veux un bouton un peu plus subtil. C'est là que les boutons contour viennent à la rescousse !

<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-success">Succès</button>

Les classes btn-outline-* te donnent des boutons avec des bordures colorées et des arrière-plans transparents.

Boutons Pleins

Besoin d'un bouton qui s'étend sur toute la largeur de son parent ? Les boutons pleins sont tes amis !

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Bouton plein</button>
<button class="btn btn-primary" type="button">Bouton plein</button>
</div>

La classe d-grid sur le div parent et la classe gap-2 ajoutent un peu d'espace entre les boutons.

États des Boutons

Les boutons peuvent avoir différents états, tout comme nous avons différents humeurs !

<button type="button" class="btn btn-primary">Bouton normal</button>
<button type="button" class="btn btn-primary active">Bouton actif</button>
<button type="button" class="btn btn-primary" disabled>Bouton désactivé</button>

La classe active fait apparaître le bouton comme pressé.
L'attribut disabled rend le bouton non cliquable.

Boutons à Basculement

Les boutons à basclement sont comme les interrupteurs lumineux - ils peuvent être allumés ou éteints !

<button type="button" class="btn btn-primary" data-bs-toggle="button">Bouton à basclement</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Bouton à basclement actif</button>

L'attribut data-bs-toggle="button" active la fonctionnalité de basclement.

Groupes de Boutons

Parfois, les boutons aiment se rencontrer. C'est là que les groupes de boutons entrent en jeu !

<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>

La classe btn-group regroupe les boutons.

Boutons Déroulants

Les boutons déroulants sont comme des boîtes surprises - clique dessus, et d'autres options apparaissent !

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Bouton déroulant
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Une autre action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

La classe dropdown-toggle et l'attribut data-bs-toggle="dropdown" activent la fonctionnalité déroulante.

Conclusion

Félicitations ! Tu viens de terminer un voyage à travers les boutons Bootstrap. Souviens-toi, la pratique rend parfait, alors n'hésite pas à expérimenter avec différentes combinaisons. Qui sait ? Tu pourrais créer la prochaine grande chose dans le design web !

Voici un tableau de référence rapide de toutes les classes de boutons que nous avons couvertes :

Classe	Description
btn	Classe de base pour les boutons
btn-primary	Bouton de couleur principale
btn-secondary	Bouton de couleur secondaire
btn-success	Bouton de couleur succès
btn-danger	Bouton de couleur danger
btn-warning	Bouton de couleur avertissement
btn-info	Bouton de couleur info
btn-light	Bouton de couleur clair
btn-dark	Bouton de couleur sombre
btn-lg	Bouton large
btn-sm	Bouton petit
btn-outline-*	Bouton contour
active	Bouton actif
disabled	Bouton désactivé
data-bs-toggle="button"	Bouton à basclement
btn-group	Groupe de boutons
dropdown-toggle	Bouton déroulant

Bonne programmation, et que le Bootstrap soit avec toi !

Credits: Image by storyset

Tutoriel précédent:

Bootstrap - Démo Grille

Tutoriel suivant:

Bootstrap - Démo de navigation