variabel CSS
Gunakake properti khusus CSS Bootstrap kanggo desain lan pangembangan sing cepet lan maju.
Bootstrap nyakup akeh properti khusus (variabel) CSS ing CSS sing dikompilasi kanggo kustomisasi wektu nyata tanpa perlu nglumpukake maneh Sass. Iki nyedhiyakake akses gampang menyang nilai sing umum digunakake kaya warna tema, titik istirahat, lan tumpukan font utama nalika nggarap inspektur browser, kothak wedhi kode, utawa prototipe umum.
Kabeh sifat khusus kita diawali karobs- kanggo ngindhari konflik karo CSS pihak katelu.
Variabel root
Mangkene variabel sing kalebu (cathetan yen :rootdibutuhake) sing bisa diakses ing ngendi wae CSS Bootstrap dimuat. Dheweke ana ing file kita _root.scsslan kalebu ing file dist sing dikompilasi.
: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;
}
Variabel komponen
Kita uga wiwit nggunakake properti khusus minangka variabel lokal kanggo macem-macem komponen. Kanthi cara iki, kita bisa nyuda CSS sing dikompilasi, mesthekake gaya ora diwarisake ing papan kaya tabel bersarang, lan ngidini sawetara restyling dhasar lan nambah komponen Bootstrap sawise kompilasi Sass.
Deleng dokumentasi tabel kita kanggo sawetara wawasan babagan carane kita nggunakake variabel CSS .
Kita uga nggunakake variabel CSS ing grids kita - utamane kanggo talang - kanthi panggunaan komponen luwih akeh ing mangsa ngarep.
Tuladha
Variabel CSS nawakake keluwesan sing padha karo variabel Sass, nanging tanpa perlu kompilasi sadurunge dilayani menyang browser. Contone, ing kene kita ngreset gaya font lan pranala kaca kita nganggo variabel CSS.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Grid breakpoints
Nalika kita nyakup breakpoints kothak minangka variabel CSS (kajaba xs), weruh yen variabel CSS ora bisa digunakake ing pitakon media . Iki dirancang ing spek CSS kanggo variabel, nanging bisa uga owah ing taun-taun sing bakal teka kanthi dhukungan kanggo env()variabel. Priksa jawaban Stack Overflow iki kanggo sawetara pranala sing migunani. Ing sawetoro wektu, sampeyan bisa nggunakake variabel kasebut ing kahanan CSS liyane, uga ing JavaScript sampeyan.