CSS-variabler

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-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 använder sig alltmer av anpassade egenskaper som lokala variabler för olika komponenter. På så sätt minskar vi vår kompilerade CSS, säkerställer att stilar inte ärvs på platser som kapslade tabeller och tillåter 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 . Våra navigeringsfält använder även CSS-variabler från och med v5.2.0. Vi använder också CSS-variabler över våra rutnät – främst för takrännor, det nya CSS-rutnätet för opt-in – med mer komponentanvändning i framtiden.

När det är möjligt tilldelar vi CSS-variabler på baskomponentnivån (t.ex. .navbarför navbar och dess underkomponenter). Detta minskar gissningar om var och hur man ska anpassa, och möjliggör enkla ändringar av vårt team i framtida uppdateringar.

Prefix

De flesta CSS-variabler använder ett prefix för att undvika kollisioner med din egen kodbas. Detta prefix är ett tillägg till det --som krävs för varje CSS-variabel.

Anpassa prefixet via $prefixSass-variabeln. Som standard är den inställd på bs-(observera det efterföljande strecket).

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.