CSS Verännerlechen

Bootstrap enthält ongeféier zwee Dutzend CSS personaliséiert Eegeschaften (Variablen) a senger kompiléierter CSS, mat Dosende méi um Wee fir verbessert Personnalisatioun op enger pro-Komponent Basis. Dës bidden en einfachen Zougang zu allgemeng benotzte Wäerter wéi eis Themefaarwen, Breakpoints, 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-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --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-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", 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));
}

Komponent Verännerlechen

Mir fänken och un Benotzerdefinéiert Eegeschaften als lokal Variablen fir verschidde Komponenten ze benotzen. Op dës Manéier kënne mir eis kompiléiert CSS reduzéieren, suergen datt Stiler net op Plazen wéi nestet Dëscher ierflech sinn, an e puer Basis Restyling an Ausdehnung vu Bootstrap Komponenten no Sass Kompiléierung erlaben.

Kuckt eis Tabelldokumentatioun fir e bëssen Abléck wéi mir CSS Variablen benotzen .

Mir benotzen och CSS Variablen iwwer eis Gitter - haaptsächlech fir Rennen - mat méi Komponentnotzung déi an Zukunft kommen.

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