Variables CSS

Bootstrap inclut de nombreuses propriétés personnalisées CSS (variables) dans son CSS compilé pour une personnalisation en temps réel sans qu'il soit nécessaire de recompiler Sass. Ceux-ci offrent un accès facile aux valeurs couramment utilisées telles que nos couleurs de thème, nos points d'arrêt et nos piles de polices principales lorsque vous travaillez dans l'inspecteur de votre navigateur, un bac à sable de code ou un prototypage général.

Toutes nos propriétés personnalisées sont préfixées parbs- pour éviter les conflits avec des CSS tiers.

Variables racine

Voici les variables que nous incluons (notez que le :rootest obligatoire) qui sont accessibles partout où le CSS de Bootstrap est chargé. Ils se trouvent dans notre _root.scssfichier et sont inclus dans nos fichiers dist compilés.

: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;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Variables de composant

Bootstrap 5 utilise de plus en plus des propriétés personnalisées comme variables locales pour divers composants. De cette façon, nous réduisons notre CSS compilé, veillons à ce que les styles ne soient pas hérités dans des endroits comme les tables imbriquées, et permettons un restylage et une extension de base des composants Bootstrap après la compilation Sass.

Consultez notre documentation sur les tableaux pour avoir un aperçu de la façon dont nous utilisons les variables CSS . Nos barres de navigation utilisent également des variables CSS à partir de la v5.2.0. Nous utilisons également des variables CSS dans nos grilles, principalement pour les gouttières de la nouvelle grille CSS opt-in, avec une utilisation accrue des composants à l'avenir.

Dans la mesure du possible, nous attribuerons des variables CSS au niveau du composant de base (par exemple, .navbarpour la barre de navigation et ses sous-composants). Cela réduit les devinettes sur où et comment personnaliser, et permet des modifications faciles par notre équipe dans les futures mises à jour.

Préfixe

La plupart des variables CSS utilisent un préfixe pour éviter les collisions avec votre propre base de code. Ce préfixe s'ajoute à celui --qui est requis sur chaque variable CSS.

Personnalisez le préfixe via la $prefixvariable Sass. Par défaut, il est défini sur bs-(notez le tiret final).

Exemples

Les variables CSS offrent une flexibilité similaire aux variables de Sass, mais sans avoir besoin de compilation avant d'être servies au navigateur. Par exemple, ici, nous réinitialisons les styles de police et de lien de notre page avec des variables CSS.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

Points d'arrêt de la grille

Bien que nous incluions nos points d'arrêt de grille en tant que variables CSS (à l'exception de xs), sachez que les variables CSS ne fonctionnent pas dans les requêtes multimédias . Ceci est prévu dans la spécification CSS pour les variables, mais peut changer dans les années à venir avec la prise en charge des env()variables. Consultez cette réponse Stack Overflow pour quelques liens utiles. En attendant, vous pouvez utiliser ces variables dans d'autres situations CSS, ainsi que dans votre JavaScript.