CSS variabler

Bootstrap inkluderer omkring to dusin brugerdefinerede CSS-egenskaber (variabler) i sin kompilerede CSS, med snesevis mere på vej til forbedret tilpasning pr. komponent. Disse giver nem adgang til almindeligt anvendte værdier som vores temafarver, brudpunkter og primære skrifttyper, når du arbejder i din browsers inspektør, en kodesandkasse eller generel prototyping.

Alle vores tilpassede egenskaber er præfikset medbs- for at undgå konflikter med tredjeparts CSS.

Rodvariabler

Her er de variabler, vi inkluderer (bemærk, at det :rooter påkrævet), som kan tilgås overalt, hvor Bootstraps CSS er indlæst. De er placeret i vores _root.scssfil og inkluderet i vores kompilerede dist-filer.

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

Komponentvariabler

Vi er også begyndt at gøre brug af brugerdefinerede egenskaber som lokale variabler for forskellige komponenter. På denne måde kan vi reducere vores kompilerede CSS, sikre, at stilarter ikke nedarves på steder som indlejrede tabeller, og tillade en vis grundlæggende restyling og udvidelse af Bootstrap-komponenter efter Sass-kompilering.

Tag et kig på vores tabeldokumentation for at få et indblik i, hvordan vi bruger CSS-variabler .

We’re also using CSS variables across our grids—primarily for gutters—with more component usage coming in the future.

Examples

CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.

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