variabel CSS

Bootstrap kalebet seueur sipat khusus (variabel) CSS 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 kami.

: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;
}

Variabel komponén

Bootstrap 5 beuki ngagunakeun sipat khusus salaku variabel lokal pikeun sababaraha komponén. Ku cara ieu urang ngurangan CSS kami disusun, mastikeun gaya teu diwariskeun di tempat kawas tabel nested, sarta ngidinan sababaraha restyling dasar sarta manjangkeun komponén Bootstrap sanggeus kompilasi Sass.

Tingali kana dokuméntasi méja kami pikeun sababaraha wawasan kumaha urang ngagunakeun variabel CSS . Navbars kami ogé ngagunakeun variabel CSS sakumaha tina v5.2.0. Kami ogé ngagunakeun variabel CSS dina grids kami-utamina pikeun talang grid CSS opt-in énggal- kalayan langkung seueur panggunaan komponén anu bakal datang.

Sabisana, urang bakal nangtukeun variabel CSS di tingkat komponén dasar (misalna, .navbarpikeun navbar jeung sub-komponén na). Ieu ngurangan guessing on dimana jeung kumaha carana ngaropea, sarta ngamungkinkeun pikeun modifikasi gampang ku tim kami di apdet hareup.

awalan

Kaseueuran variabel CSS nganggo awalan pikeun ngahindarkeun tabrakan sareng basis kode anjeun nyalira. Awalan ieu salian ti --anu diperlukeun dina unggal variabel CSS.

Sesuaikeun awalan via $prefixvariabel Sass. Sacara standar, éta disetel ka bs-(perhatikeun dash labuh).

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.