variabel CSS
Anggo sipat khusus CSS Bootstrap pikeun desain sareng pamekaran anu gancang sareng maju.
Bootstrap kalebet seueur sipat khusus CSS (variabel) dina CSS anu disusun pikeun kustomisasi sacara real-time tanpa kedah nyusun ulang Sass. Ieu nyadiakeun aksés gampang kana nilai nu ilahar dipake kawas warna tema urang, titik putus, jeung tumpukan font primér nalika digawé di inspektur browser anjeun, sandbox kode, atawa prototyping umum.
Sadaya sipat adat urang diawalan kubs- pikeun nyegah konflik sareng CSS pihak katilu.
Variabel akar
Ieu mangrupikeun variabel anu kami kalebet (perhatikeun yén :rootdiperyogikeun) anu tiasa diaksés dimana waé CSS Bootstrap dimuat. Éta aya dina file kami _root.scsssareng kalebet dina file dist anu disusun.
: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;
}
Variabel komponén
Kami ogé mimiti ngagunakeun sipat khusus salaku variabel lokal pikeun sababaraha komponén. Ku cara ieu urang tiasa ngirangan CSS anu dikompilasi, mastikeun gaya henteu diwariskeun di tempat-tempat sapertos tabel nested, sareng ngamungkinkeun sababaraha restyling dasar sareng ngalegaan komponén Bootstrap saatos kompilasi Sass.
Tingali kana dokuméntasi méja kami pikeun sababaraha wawasan kumaha urang ngagunakeun variabel CSS .
Kami ogé nganggo variabel CSS dina grids kami — utamina pikeun talang — kalayan langkung seueur panggunaan komponén anu bakal datang.
Contona
Variabel CSS nawiskeun kalenturan anu sami sareng variabel Sass, tapi tanpa peryogi kompilasi sateuacan dilayanan ka browser. Contona, di dieu urang ngareset font kaca urang jeung gaya link kalawan variabel CSS.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Grid breakpoints
Bari urang kaasup breakpoints grid urang salaku variabel CSS (iwal xs), jadi sadar yen variabel CSS teu dianggo dina queries média . Ieu ku desain dina spésifikasi CSS pikeun variabel, tapi bisa robah dina taun datang kalayan rojongan pikeun env()variabel. Pariksa ieu waleran tumpukan Overflow pikeun sababaraha tumbu mantuan. Samentawis waktos, anjeun tiasa nganggo variabel ieu dina kaayaan CSS anu sanés, ogé dina JavaScript anjeun.