CSS-variabler
Använd Bootstraps anpassade CSS-egenskaper för snabb och framåtblickande design och utveckling.
Bootstrap inkluderar många anpassade CSS-egenskaper (variabler) i sin kompilerade CSS för anpassning i realtid utan att behöva kompilera om Sass. Dessa ger enkel åtkomst till vanliga värden som våra temafärger, brytpunkter och primära teckensnittsstaplar när du arbetar i din webbläsares inspektör, en kodsandlåda eller allmän prototyp.
Alla våra anpassade egenskaper har prefixbs- för att undvika konflikter med tredje parts CSS.
Rotvariabler
Här är de variabler vi inkluderar (observera att det :rootkrävs) som kan nås var som helst där Bootstraps CSS laddas. De finns i vår _root.scssfil och ingår i våra kompilerade 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 börjar också använda anpassade egenskaper som lokala variabler för olika komponenter. På så sätt kan vi minska vår kompilerade CSS, säkerställa att stilar inte ärvs på platser som kapslade tabeller, och tillåta en del grundläggande omstyling och utökning av Bootstrap-komponenter efter Sass-kompilering.
Ta en titt på vår tabelldokumentation för lite insikt i hur vi använder CSS-variabler .
Vi använder också CSS-variabler över våra rutnät – främst för takrännor – med mer komponentanvändning som kommer i framtiden.
Exempel
CSS-variabler erbjuder liknande flexibilitet som Sass variabler, men utan behov av kompilering innan de serveras till webbläsaren. Till exempel, här återställer vi vår sidas teckensnitt och länkstilar med CSS-variabler.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Grid brytpunkter
Även om vi inkluderar våra rutnätsbrytpunkter som CSS-variabler (förutom xs), var medveten om att CSS-variabler inte fungerar i mediefrågor . Detta är designat i CSS-specifikationen för variabler, men kan ändras under kommande år med stöd för env()variabler. Kolla in det här Stack Overflow-svaret för några användbara länkar. Under tiden kan du använda dessa variabler i andra CSS-situationer, såväl som i ditt JavaScript.
