Vigezo vya CSS

Bootstrap inajumuisha sifa nyingi maalum za CSS (vigeu) katika CSS yake iliyokusanywa kwa ubinafsishaji wa wakati halisi bila hitaji la kukusanya tena Sass. Hizi hutoa ufikiaji rahisi wa thamani zinazotumiwa na watu wengi kama vile rangi za mandhari, vizuizi, na mrundikano wa fonti msingi unapofanya kazi katika ukaguzi wa kivinjari chako, kisanduku cha msimbo, au uchapaji wa jumla wa protoksi.

Sifa zetu zote maalum zimeangaziwa awalibs- ili kuzuia mizozo na CSS ya wahusika wengine.

Vigezo vya mizizi

Hapa kuna anuwai tunayojumuisha (kumbuka kuwa :rootinahitajika) ambayo inaweza kupatikana mahali popote CSS ya Bootstrap imepakiwa. Zinapatikana katika _root.scssfaili yetu na zimejumuishwa katika faili zetu zilizokusanywa za dist.

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

Vigezo vya vipengele

Pia tunaanza kutumia mali maalum kama vigeu vya ndani kwa vipengele mbalimbali. Kwa njia hii tunaweza kupunguza CSS yetu iliyokusanywa, kuhakikisha mitindo hairithiwi katika maeneo kama vile jedwali zilizowekwa, na kuruhusu urekebishaji wa kimsingi na upanuzi wa vipengee vya Bootstrap baada ya mkusanyiko wa Sass.

Angalia hati zetu za jedwali kwa ufahamu fulani juu ya jinsi tunavyotumia viwezo vya CSS .

Pia tunatumia viasili vya CSS kote kwenye gridi zetu—hasa kwa mifereji ya maji—na matumizi zaidi ya vipengele yanakuja katika siku zijazo.

Mifano

Vigezo vya CSS vinatoa unyumbufu sawa na vigeu vya Sass, lakini bila hitaji la mkusanyiko kabla ya kuhudumiwa kwa kivinjari. Kwa mfano, hapa tunaweka upya fonti na mitindo ya kiunganishi ya ukurasa wetu na viambajengo vya CSS.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

Vizuizi vya gridi

Ingawa tunajumuisha sehemu zetu za kuvunja gridi kama vigeu vya CSS (isipokuwa xs), fahamu kuwa vigeu vya CSS havifanyi kazi katika hoja za midia . Hii ni kwa muundo katika CSS spec kwa vigeu, lakini inaweza kubadilika katika miaka ijayo na usaidizi wa env()anuwai. Angalia jibu hili la Kufurika kwa Stack kwa viungo kadhaa muhimu. Kwa wakati huu, unaweza kutumia vigeu hivi katika hali zingine za CSS, na vile vile kwenye JavaScript yako.