CSS proměnné
Použijte vlastní vlastnosti CSS Bootstrapu pro rychlý a perspektivní návrh a vývoj.
Bootstrap obsahuje mnoho vlastních vlastností CSS (proměnných) ve svém zkompilovaném CSS pro přizpůsobení v reálném čase bez nutnosti znovu kompilovat Sass. Poskytují snadný přístup k běžně používaným hodnotám, jako jsou barvy motivů, zarážky a primární sady písem při práci v inspektoru vašeho prohlížeče, karanténě kódu nebo obecném prototypování.
Všechny naše vlastní vlastnosti mají předponubs- , aby se předešlo konfliktům s CSS třetích stran.
Kořenové proměnné
Zde jsou proměnné, které zahrnujeme (všimněte si, že :rootje vyžadováno), ke kterým lze přistupovat odkudkoli, kde je načten CSS Bootstrapu. Jsou umístěny v našem _root.scsssouboru a zahrnuty v našich kompilovaných dist souborech.
: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;
}
Komponentní proměnné
Začínáme také využívat uživatelské vlastnosti jako lokální proměnné pro různé komponenty. Tímto způsobem můžeme zredukovat naše zkompilované CSS, zajistit, aby styly nebyly zděděny na místech, jako jsou vnořené tabulky, a umožnit základní restyling a rozšíření komponent Bootstrap po kompilaci Sass.
Podívejte se na naši dokumentaci k tabulce, kde najdete přehled o tom, jak používáme proměnné CSS .
Také používáme proměnné CSS napříč našimi mřížkami – primárně pro okapy – s větším využitím komponent v budoucnu.
Příklady
Proměnné CSS nabízejí podobnou flexibilitu jako proměnné Sass, ale bez nutnosti kompilace před doručením do prohlížeče. Například zde obnovujeme písmo a styly odkazů naší stránky pomocí proměnných CSS.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Zarážky mřížky
I když naše zarážky mřížky zahrnujeme jako proměnné CSS (kromě xs), uvědomte si, že proměnné CSS nefungují v dotazech na média . Toto je záměrné ve specifikaci CSS pro proměnné, ale může se v příštích letech změnit s podporou env()proměnných. Podívejte se na tuto odpověď Stack Overflow , kde najdete několik užitečných odkazů. Mezitím můžete tyto proměnné používat v jiných situacích CSS a také ve svém JavaScriptu.