CSS-i muutujad

Bootstrap sisaldab oma kompileeritud CSS-is palju CSS-i kohandatud atribuute (muutujaid) , mida saab reaalajas kohandada, ilma et oleks vaja Sassi uuesti kompileerida. 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-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;
}

Komponentmuutujad

Bootstrap 5 kasutab üha enam erinevate komponentide kohalike muutujatena kohandatud atribuute. Nii vähendame oma kompileeritud CSS-i, tagame, et stiilid ei päranduks sellistes kohtades nagu pesastatud tabelid, ning võimaldame pärast Sassi kompileerimist Bootstrapi komponentide põhilist ümberkujundamist ja laiendamist.

Vaadake meie tabelidokumentatsiooni, et saada ülevaade sellest, kuidas me CSS-i muutujaid kasutame . Meie navigeerimisribad kasutavad alates versioonist 5.2.0 ka CSS-i muutujaid . Samuti kasutame oma võrgustikes CSS-i muutujaid – eeskätt rennide jaoks, uus lubatud CSS-võrk – ning komponentide kasutust tuleb tulevikus veelgi.

Võimaluse korral määrame CSS-i muutujad põhikomponendi tasemel (nt .navbarnavigeerimisriba ja selle alamkomponentide jaoks). See vähendab arvamist, kus ja kuidas kohandada, ning võimaldab meie meeskonnal tulevastes värskendustes hõlpsasti muudatusi teha.

Eesliide

Enamik CSS-i muutujaid kasutab eesliidet, et vältida kokkupõrkeid teie enda koodibaasiga. See eesliide on lisaks sellele, --mis on nõutav iga CSS-i muutuja puhul.

Kohandage eesliide $prefixSassi muutuja kaudu. Vaikimisi on see seatud väärtusele bs-(märkige lõpukriips).

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

Võrgu murdepunktid

Kuigi me kaasame oma ruudustiku katkestuspunktid CSS-i muutujatena (välja arvatud xs), pidage meeles, et CSS-muutujad ei tööta meediumipäringutes . See on muutujate CSS-i spetsifikatsioonis kavandatud, kuid võib muutujate toega lähiaastatel muutuda env(). Abistavate linkide saamiseks vaadake seda Stack Overflow vastust . Seni saate neid muutujaid kasutada muudes CSS-i olukordades, aga ka oma JavaScriptis.