CSS variabler
Brug Bootstraps CSS-tilpassede egenskaber til hurtigt og fremadskuende design og udvikling.
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-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;
}
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 .
Vi bruger også CSS-variabler på tværs af vores net – primært til tagrender – med mere komponentbrug på vej i fremtiden.
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.