CSS üýtgeýjileri
Çalt we geljegi uly dizaýn we ösüş üçin Bootstrap-yň CSS aýratyn aýratynlyklaryny ulanyň.
“ Bootstrap ”, Sass-y täzeden işlemegiň zerurlygy bolmazdan, hakyky wagtda özleşdirmek üçin düzülen CSS-de köp sanly CSS aýratyn häsiýetlerini (üýtgeýjileri) öz içine alýar. Bular, brauzeriňiziň inspektorynda, kod sandyk gutusynda ýa-da umumy prototip görnüşinde işleýän wagtyňyz, mowzuk reňklerimiz, bölek nokatlarymyz we esasy şrift ýazgylary ýaly giňden ulanylýan bahalara aňsat girýär.
bs-Customhli adaty häsiýetlerimiz, üçünji tarap CSS bilen gapma-garşylyklaryň öňüni almak üçin goşulýar .
Kök üýtgeýjiler
:rootIne, “ Bootstrap” -yň CSS ýüklenen islendik ýerine girip bolýan üýtgeýänler (zerurdygyny belläň ). Olar biziň _root.scssfaýlymyzda ýerleşýär we düzülen dist faýllarymyza girýär.
: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;
}
Komponent üýtgeýjileri
Şeýle hem, dürli komponentler üçin ýerli üýtgeýjiler hökmünde adaty häsiýetleri ulanyp başlaýarys. Şeýlelik bilen, düzülen CSS-larymyzy azaldyp bileris, stilleriň höwürtgelenen stollar ýaly ýerlerde miras galmazlygyny üpjün edip bileris we Sass düzülenden soň Bootstrap komponentleriniň käbirini gaýtadan işlemäge we giňeltmäge mümkinçilik bereris.
CSS üýtgeýjilerini nähili ulanýandygymyzy bilmek üçin tablisa resminamalarymyza göz aýlaň .
Şeýle hem, geljekde has köp komponent ulanylyşy bilen, gözeneklerimiz üçin CSS üýtgeýjilerini ulanýarys.
Mysallar
CSS üýtgeýjileri Sassyň üýtgeýjilerine meňzeş çeýeligi hödürleýär, ýöne brauzere hyzmat etmezden ozal düzmek zerurlygy ýok. Mysal üçin, bu ýerde sahypamyzyň şriftini we CSS üýtgeýjileri bilen baglanyşyk stillerini täzeden düzýäris.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Grid bölekleri
Tor nokatlarymyzy CSS üýtgeýjileri hökmünde goşsak-da ( CSS üýtgeýjileriniň media talaplarynda işlemeýändiginixs biliň) . Bu üýtgeýjiler üçin CSS spektrinde dizaýn boýunça, ýöne üýtgeýänleri goldamak bilen ýakyn ýyllarda üýtgäp biler . Käbir peýdaly baglanyşyklar üçin bu “Stack Overflow” jogabyna göz aýlaň. Şol bir wagtyň özünde, bu üýtgeýjileri beýleki CSS ýagdaýlarynda, JavaScript-de ulanyp bilersiňiz.env()