Vigezo vya CSS

Bootstrap inajumuisha takriban dazeni mbili za sifa maalum za CSS (vigeu) katika CSS yake iliyokusanywa, na kadhaa zaidi zikiwa njiani kwa ajili ya kuboresha ubinafsishaji kwa misingi ya kila kipengele. 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-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --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));
}

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