CSS variabler

Bootstrap inkluderer mange brugerdefinerede CSS-egenskaber (variabler) i sin kompilerede CSS til tilpasning i realtid uden behov for at genkompilere Sass. 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-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;
}

Komponentvariabler

Bootstrap 5 gør i stigende grad brug af brugerdefinerede egenskaber som lokale variabler for forskellige komponenter. På denne måde reducerer vi vores kompilerede CSS, sikrer, at stilarter ikke nedarves på steder som indlejrede tabeller, og tillader 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 . Vores navbarer bruger også CSS-variabler fra v5.2.0. Vi bruger også CSS-variabler på tværs af vores net – primært til tagrender, det nye opt-in CSS-gitter – med mere komponentbrug på vej i fremtiden.

Når det er muligt, tildeler vi CSS-variabler på basiskomponentniveau (f.eks. .navbarfor navbar og dens underkomponenter). Dette reducerer gæt på, hvor og hvordan man tilpasser, og giver mulighed for nemme ændringer af vores team i fremtidige opdateringer.

Præfiks

De fleste CSS-variabler bruger et præfiks for at undgå kollisioner med din egen kodebase. Dette præfiks er et supplement til det --, der kræves for hver CSS-variabel.

Tilpas præfikset via $prefixSass-variablen. Som standard er den indstillet til bs-(bemærk den efterfølgende tankestreg).

Eksempler

CSS-variabler giver samme fleksibilitet som Sass' variabler, men uden behov for kompilering, før de serveres til browseren. For eksempel nulstiller vi vores sides skrifttype og linkstile med CSS-variabler.

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

Grid-brudpunkter

Selvom vi inkluderer vores grid-brudpunkter som CSS-variabler (undtagen xs), skal du være opmærksom på, at CSS-variabler ikke virker i medieforespørgsler . Dette er designet i CSS-specifikationen for variabler, men kan ændre sig i de kommende år med understøttelse af env()variabler. Tjek dette Stack Overflow-svar for nogle nyttige links. I mellemtiden kan du bruge disse variabler i andre CSS-situationer såvel som i din JavaScript.