CSS Verännerlechen

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

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

Grid Breakpoints

Wärend mir eis Gitterbriechpunkte als CSS Variablen enthalen (ausser xs), sief bewosst datt CSS Variablen net a Medienufroen funktionnéieren . Dëst ass duerch 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.