Bootstrap - Badges Demo
Qu'est-ce qu'une Écusson ?
Salut à toi, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant des écussons Bootstrap. En tant que votre professeur d'informatique de quartier, je suis là pour vous guider dans cette aventure, même si vous n'avez jamais écrit une seule ligne de code auparavant. Alors, prenez vos sacs à dos virtuels, et mettons-nous en route ensemble !
Un écusson dans Bootstrap est comme une étiquette numérique que vous pouvez ajouter à votre page web. C'est un petit élément, souvent circulaire ou en forme de pilule, utilisé pour mettre en évidence ou afficher des informations supplémentaires. Pensez-y comme aux petites bulles de notification que vous voyez sur vos applications téléphoniques - elles sont accrocheuses et informatives !
Analogie du monde réel
Imaginez que vous portez un uniforme de scout. Les écussons sur votre manche représentent vos réalisations, n'est-ce pas ? Les écussons Bootstrap fonctionnent de manière similaire dans le monde numérique. Ils peuvent afficher des nombres (comme les messages non lus), des états (nouveau, vente, etc.) ou simplement ajouter un intérêt visuel à votre page web.
Commencer avec les Écussons Bootstrap
Avant de plonger dans le code, assurons-nous que nous avons Bootstrap configuré. Ne vous inquiétez pas ; c'est plus simple que de monter une tente lors d'un camping !
Configurer Bootstrap
Pour utiliser Bootstrap, nous devons inclure ses fichiers CSS et JavaScript dans notre HTML. Voici comment faire :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démonstration des Écussons Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Votre contenu va ici -->
<!-- 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 la scène pour notre performance d'écusson. Nous avons lié les fichiers CSS et JavaScript de Bootstrap, ce qui nous donne accès à tous les avantages de Bootstrap, y compris les écussons.
Utilisation de Base des Écussons
Maintenant que tout est configuré, créons notre premier écusson !
Exemple Simple d'Écusson
<h1>Bienvenue sur mon blog <span class="badge bg-secondary">Nouveau</span></h1>Dans cet exemple, nous avons ajouté un écusson juste à côté de notre titre. L'élément span avec les classes badge et bg-secondary crée un écusson simple de couleur grise avec le texte "Nouveau".
Explication
-
<span>: C'est un conteneur en ligne utilisé pour marquer une partie du texte. -
class="badge": Cette classe Bootstrap transforme notre span en écusson. -
bg-secondary: Cela ajoute une couleur de fond grise à notre écusson.
Couleurs des Écussons
Bootstrap offre un arc-en-ciel de couleurs pour vos écussons. Explorons-les !
<span class="badge bg-primary">Principal</span>
<span class="badge bg-secondary">Secondaire</span>
<span class="badge bg-success">Succès</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Avertissement</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Clair</span>
<span class="badge bg-dark">Sombre</span>Chacun de ces écussons a une couleur différente, parfait pour transmettre différentes significations ou simplement rendre votre page plus colorée !
Tableau des Significations des Couleurs
| Couleur | Utilisation Typique |
|---|---|
| Principal | Actions ou informations principales |
| Secondaire | Informations moins importantes |
| Succès | Actions ou messages positifs |
| Danger | Avertissements ou messages d'erreur |
| Avertissement | Informations de précaution |
| Info | Messages informationnels neutres |
| Clair | Arrière-plans subtils ou moins mis en avant |
| Sombre | Contraste élevé ou informations importantes |
Écussons en Forme de Pilule
Vous souhaitez rendre vos écussons un peu plus arrondis ? Découvrez les écussons en forme de pilule !
<span class="badge rounded-pill bg-primary">Écusson en Forme de Pilule</span>En ajoutant la classe rounded-pill, nous transformons notre écusson régulier en un écusson en forme de pilule. C'est comme donner un lifting à votre écusson !
Écussons dans les Boutons
Les écussons peuvent également être utilisés à l'intérieur des boutons pour créer des effets sympas. Essayons-le :
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-secondary">4</span>
</button>Cela crée un bouton qui dit "Messages" avec un petit écusson montrant le nombre 4. C'est parfait pour afficher des choses comme le nombre de messages non lus !
Écussons Positionnés
Parfois, vous souhaitez que votre écusson soit positionné par rapport à un autre élément. Bootstrap rend cela facile avec les écussons positionnés :
<button type="button" class="btn btn-primary position-relative">
Boîte de réception
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">messages non lus</span>
</span>
</button>Cela crée un bouton avec un écusson positionné dans le coin supérieur droit, légèrement chevauchant le bouton. C'est comme la cerise sur le sundae de votre bouton !
Décomposition
-
position-relative: Rend le bouton un contexte de positionnement pour l'écusson. -
position-absolute: Positionne l'écusson absolument à l'intérieur du bouton. -
top-0 start-100: Positionne l'écusson dans le coin supérieur droit. -
translate-middle: Déplace l'écusson pour une meilleure alignement visuel. -
visually-hidden: Fournit du texte pour les lecteurs d'écran sans le rendre visible visuellement.
Conclusion
Et voilà, les amis ! Nous avons traversé le pays des écussons Bootstrap, des écussons colorés simples aux écussons en forme de pilule, en passant par les écussons positionnés sur les boutons. Souvenez-vous, les écussons sont comme l'épice dans votre recette de conception web - utilisez-les avec sagesse pour ajouter la bonne quantité de saveur à vos pages !
La pratique rend parfait, alors n'ayez pas peur d'expérimenter avec différentes combinaisons. Qui sait ? Vous pourriez juste créer la prochaine grande tendance en conception web avec votre utilisation créative des écussons !
Bonne programmation, et que vos écussons soient toujours lumineux et vos infobulles toujours informatives !
Credits: Image by storyset