CSS Variablen

Bootstrap enthält vill CSS personaliséiert Eegeschaften (Variablen) a senger kompiléierter CSS fir Echtzäit Personnalisatioun ouni de Besoin fir Sass nei ze kompiléieren. Dës bidden en einfachen Zougang zu allgemeng benotzte Wäerter wéi eis Themefaarwen, Breakpunkten, a primär Schrëftstacks wann Dir an Ärem Browser Inspekter, enger Code Sandbox oder allgemeng Prototyping schafft.

All eis personaliséiert Properties si virgeschriwwebs- fir Konflikter mat Drëtt Partei CSS ze vermeiden.

Root Verännerlechen

Hei sinn d'Variabelen déi mir enthalen (notéiert datt :rootdat erfuerderlech ass) déi iwwerall zougänglech kënne ginn Bootstrap's CSS gelueden ass. Si sinn an eisem _root.scssFichier lokaliséiert an an eise kompiléierten Dist Dateien abegraff.

: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;
}

Komponent Verännerlechen

Bootstrap 5 benotzt ëmmer méi personaliséiert Eegeschaften als lokal Variablen fir verschidde Komponenten. Op dës Manéier reduzéiere mir eis kompiléiert CSS, suergen datt Stiler net op Plazen wéi nestet Dëscher ierflech sinn, an erlaben e puer Basis Restyling an Ausdehnung vu Bootstrap Komponenten no der Sass Kompiléierung.

Kuckt eis Tabelldokumentatioun fir e bëssen Abléck wéi mir CSS Variablen benotzen . Eis Navbars benotzen och CSS Variablen ab v5.2.0. Mir benotzen och CSS Variablen iwwer eis Gitter - haaptsächlech fir Rennen dat neit Opt-in CSS Gitter - mat méi Komponentnotzung déi an Zukunft kommen.

Wa méiglech, wäerte mir CSS Variablen um Basiskomponentniveau zouginn (zB .navbarfir navbar a seng Ënnerkomponenten). Dëst reduzéiert roden op wou a wéi ze personaliséieren, an erlaabt einfach Ännerungen vun eisem Team an zukünfteg Updates.

Präfix

Déi meescht CSS Variablen benotzen e Präfix fir Kollisiounen mat Ärer eegener Codebase ze vermeiden. Dëse Präfix ass zousätzlech zu --deem wat op all CSS Variabel erfuerderlech ass.

Personnaliséiert de Präfix iwwer d' $prefixSass Variabel. Par défaut ass et op gesat bs-(notéiert den Ofschlossstreck).

Beispiller

CSS Variablen bidden ähnlech Flexibilitéit wéi Sass Variablen, awer ouni de Besoin fir Kompiléierung ier se an de Browser servéiert ginn. Zum Beispill, hei setzen mir d'Schrëft vun eiser Säit zréck a Linkstiler mat CSS Variablen.

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

Grid Breakpoints

Wärend mir eis Gitter Breakpoints als CSS Variablen enthalen (ausser xs), sief bewosst datt CSS Variablen net a Medienufroen funktionnéieren . Dëst ass vum Design an der CSS Spezifizéierung fir Variablen, awer kann an de kommende Joere mat Ënnerstëtzung fir env()Variablen änneren. Kuckt dës Stack Overflow Äntwert fir e puer hëllefräich Linken. An der Tëschenzäit kënnt Dir dës Variabelen an anere CSS Situatiounen benotzen, wéi och an Ärem JavaScript.