Bootstrap - Variables CSS : Guide pour débutants
Bonjour à tous, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des variables CSS dans Bootstrap. Ne vous inquiétez pas si vous êtes nouveau dans ce domaine ; je vais vous guider étape par étape, comme si nous étions assis ensemble dans une classe confortable. C'est parti pour cette aventure passionnante !
Qu'est-ce que les variables CSS ?
Avant de nous pencher sur les variables spécifiques à Bootstrap, comprendreons ce qu'est une variable CSS. Les variables CSS, également connues sous le nom de propriétés CSS personnalisées, vous permettent de stocker des valeurs spécifiques pour les réutiliser dans tout votre feuille de style. Pensez à elles comme de petits contenants qui gardent vos couleurs favorites, tailles ou tout autre valeur CSS.
Variables Racines
Dans Bootstrap, les variables racines sont la base de tout le système de variables. Elles sont définies dans le sélecteur :root, qui représente le plus haut niveau de votre arborescence de document.
:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
}Ces variables définissent les couleurs de base utilisées dans Bootstrap. Par exemple, --bs-blue est la couleur bleue primaire de Bootstrap. Vous pouvez utiliser ces variables dans votre propre CSS comme ceci :
.my-element {
color: var(--bs-blue);
}Variables par défaut
Bootstrap fournit également un ensemble de variables par défaut qui sont utilisées pour styliser divers composants. Ces variables font souvent référence aux variables racines que nous venons de voir.
:root {
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-gray-600);
--bs-success: var(--bs-green);
--bs-info: var(--bs-cyan);
--bs-warning: var(--bs-yellow);
--bs-danger: var(--bs-red);
--bs-light: var(--bs-gray-100);
--bs-dark: var(--bs-gray-900);
}Ici, --bs-primary est réglé pour utiliser la valeur de --bs-blue. Cela permet de personnaliser facilement et de maintenir la cohérence dans votre projet.
Variables pour le mode sombre
Bootstrap 5 a introduit un support intégré du mode sombre à l'aide de variables CSS. Ces variables changent leurs valeurs lorsque le mode sombre est activé.
[data-bs-theme="dark"] {
--bs-body-color: #adb5bd;
--bs-body-bg: #212529;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
}Lorsque l'attribut data-bs-theme="dark" est appliqué à un élément (généralement <html> ou <body>), ces variables remplacent leurs homologues en mode clair, transformant instantanément votre site en mode sombre. Génial, non ?
Variables de composants
Les composants Bootstrap utilisent également des variables CSS pour le stylisme. Cela rend la personnalisation des composants individuels sans affecter les autres très simple.
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
}Ces variables contrôlent chaque aspect de l'apparence d'un bouton primaire. Vous souhaitez changer la couleur de survol ? Modifiez simplement --bs-btn-hover-bg !
Préfixe
Bootstrap utilise le préfixe bs- pour toutes ses variables afin d'éviter les conflits avec vos variables personnalisées ou celles d'autres bibliothèques. Si vous créez vos propres variables, il est une bonne pratique d'utiliser votre propre préfixe.
:root {
--my-awesome-color: #ff69b4;
}Exemples
Mettons nos connaissances en pratique avec quelques exemples :
- Changer la couleur primaire :
:root {
--bs-primary: #ff69b4; /* Le rose vif est le nouveau bleu ! */
}- Créer un bouton personnalisé :
.btn-awesome {
--bs-btn-color: #fff;
--bs-btn-bg: var(--my-awesome-color);
--bs-btn-border-color: var(--my-awesome-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff1493; /* Un rose plus profond pour le survol */
--bs-btn-hover-border-color: #ff1493;
}- Ajuster le fond du corps en mode sombre :
[data-bs-theme="dark"] {
--bs-body-bg: #000; /* Fond pitch black */
}Variables de focus
Bootstrap fournit également des variables pour les états de focus, assurant l'accessibilité sur tout votre site :
:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}Ces variables contrôlent l'apparence des anneaux de focus autour des éléments interactifs.
Points de rupture de la grille
Enfin, le système de grille responsive de Bootstrap est également contrôlé par des variables CSS :
:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;
}Ces variables définissent les largeurs auxquelles votre mise en page changera pour s'adapter à différentes tailles d'écran.
Résumé
Voici un tableau de référence rapide des principaux types de variables CSS que nous avons couverts :
| Type de variable | Objectif | Exemple |
|---|---|---|
| Variables racines | Définir les valeurs de base | --bs-blue: #0d6efd; |
| Variables par défaut | Définir les couleurs du thème | --bs-primary: var(--bs-blue); |
| Variables pour le mode sombre | Contrôler le mode sombre | --bs-body-bg: #212529; |
| Variables de composants | Styler des composants spécifiques | --bs-btn-bg: var(--bs-primary); |
| Variables de focus | Contrôler les états de focus | --bs-focus-ring-width: 0.25rem; |
| Points de rupture de la grille | Définir les breakpoints responsifs | --bs-breakpoint-md: 768px; |
Et voilà ! Vous avez刚刚 fait vos premiers pas dans le monde des variables CSS de Bootstrap. Souvenez-vous, la clé pour maîtriser cela est la pratique. Essayez de modifier ces variables dans vos projets et voyez comment elles affectent votre design. Bon codage, et n'oubliez pas de vous amuser avec cela !
Credits: Image by storyset