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 zetu za mandhari, sehemu za kukiuka, na mlundikano 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-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;
}

Vigezo vya vipengele

Bootstrap 5 inazidi kufanya matumizi ya mali maalum kama vigezo vya ndani kwa vipengele mbalimbali. Kwa njia hii tunapunguza CSS yetu iliyokusanywa, tunahakikisha mitindo hairithiwi katika maeneo kama vile majedwali yaliyowekwa, na kuruhusu urekebishaji na upanuzi wa vipengele vya Bootstrap baada ya mkusanyiko wa Sass.

Angalia hati zetu za jedwali kwa ufahamu fulani juu ya jinsi tunavyotumia viwezo vya CSS . Vipau vyetu vya urambazaji pia hutumia vigeu vya CSS kufikia v5.2.0. Pia tunatumia vigeu vya CSS kote kwenye gridi zetu—hasa kwa mifereji ya maji gridi mpya ya kuchagua kuingia ya CSS —na matumizi zaidi ya vipengele yanakuja katika siku zijazo.

Wakati wowote inapowezekana, tutagawa vigeu vya CSS katika kiwango cha sehemu ya msingi (kwa mfano, .navbarkwa upau wa urambazaji na vijenzi vyake vidogo). Hii inapunguza kubahatisha mahali na jinsi ya kubinafsisha, na inaruhusu marekebisho rahisi na timu yetu katika masasisho yajayo.

Kiambishi awali

Vigezo vingi vya CSS hutumia kiambishi awali ili kuzuia migongano na msingi wako wa msimbo. Kiambishi awali hiki ni pamoja na --kile kinachohitajika kwenye kila kigezo cha CSS.

Geuza kiambishi awali kukufaa kupitia kigeu cha $prefixSass. Kwa chaguo-msingi, imewekwa kwa bs-(kumbuka dashi inayofuata).

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. Wakati huo huo, unaweza kutumia vigeu hivi katika hali zingine za CSS, na vile vile kwenye JavaScript yako.