CSS-i muutujad
Kasutage Bootstrapi CSS-i kohandatud atribuute kiireks ja tulevikku vaatavaks disainiks ja arendamiseks.
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-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;
}
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);
}
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 . Vahepeal saate neid muutujaid kasutada ka muudes CSS-i olukordades, aga ka oma JavaScriptis.