CSS-i muutujad

Bootstrap sisaldab oma kompileeritud CSS-is umbes kahte tosinat CSS-i kohandatud atribuuti (muutujat) , kusjuures kümneid täiendavaid omadusi on täiustatud komponendipõhiselt. Need pakuvad lihtsat juurdepääsu sagedamini kasutatavatele väärtustele, nagu meie teemavärvid, katkestuspunktid ja peamised fondivirnad, kui töötate brauseri inspektoris, koodi liivakastis või üldises prototüüpimises.

Kõigile meie kohandatud atribuutidele on lisatud eesliide,bs- et vältida konflikte kolmanda osapoole CSS-iga.

Juurmuutujad

Siin on meie kaasatud muutujad (pange tähele, et see :rooton kohustuslik), millele pääseb juurde kõikjal, kus Bootstrapi CSS on laaditud. Need asuvad meie _root.scssfailis ja sisalduvad meie koostatud dist-failides.

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

Komponentmuutujad

Samuti hakkame erinevate komponentide jaoks kohalike muutujatena kasutama kohandatud atribuute. Nii saame vähendada oma kompileeritud CSS-i, tagada, et stiilid ei päranduks sellistes kohtades nagu pesastatud tabelid, ja võimaldada pärast Sassi kompileerimist Bootstrapi komponentide põhilist ümberkujundamist ja laiendamist.

Vaadake meie tabelidokumentatsiooni, et saada ülevaade sellest, kuidas me CSS-i muutujaid kasutame .

Samuti kasutame oma võrkudes CSS-i muutujaid – eeskätt vihmaveerennide jaoks – ning komponentide kasutust tuleb tulevikus veelgi.

Näited

CSS-i muutujad pakuvad samasugust paindlikkust kui Sassi muutujad, kuid ilma brauserile esitamise vajaduseta kompileerimine. Näiteks lähtestame siin oma lehe fondi ja lingi stiilid CSS-i muutujatega.

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