Bootstrap demo

2. Bootstrap Web sahifalarni loyihalash uchun CSS ramkasi
Bootstrap Sass-ni qayta kompilyatsiya qilmasdan real vaqtda sozlash uchun kompilyatsiya qilingan CSS-da ko'plab CSS maxsus xususiyatlarini (o'zgaruvchilari) o'z ichiga oladi. Bular brauzeringiz inspektori, kod sinov muhiti yoki umumiy prototiplashda ishlaganda mavzu ranglari, to‘xtash nuqtalari va asosiy shrift steklari kabi tez-tez ishlatiladigan qiymatlarga oson kirish imkonini beradi.
bs-Bizning barcha shaxsiy xususiyatlarimiz uchinchi tomon CSS bilan ziddiyatlarni oldini olish uchun prefiks bilan joylashtirilgan .
Komponent o'zgaruvchilari
Bootstrap 5 turli komponentlar uchun mahalliy o'zgaruvchilar sifatida maxsus xususiyatlardan tobora ko'proq foydalanmoqda. Shunday qilib, biz kompilyatsiya qilingan CSS-ni qisqartiramiz, uslublar ichki o'rnatilgan jadvallar kabi joylarda meros bo'lib qolmasligini ta'minlaymiz va Sass kompilyatsiyasidan keyin Bootstrap komponentlarini asosiy qayta tiklash va kengaytirishga ruxsat beramiz.
CSS o'zgaruvchilardan qanday foydalanayotganimizni tushunish uchun jadval hujjatlarini ko'rib chiqing . Navbarlarimiz v5.2.0 dan boshlab CSS o'zgaruvchilardan ham foydalanadi . Biz, shuningdek, CSS o'zgaruvchilardan tarmoqlarimiz bo'ylab foydalanmoqdamiz - birinchi navbatda yangi qo'shilgan CSS tarmog'i uchun - kelajakda komponentlardan foydalanish ko'proq.
Iloji bo'lsa, biz CSS o'zgaruvchilarini asosiy komponent darajasida tayinlaymiz (masalan, .navbarnavigatsiya paneli va uning pastki komponentlari uchun). Bu qayerda va qanday sozlashni taxmin qilishni kamaytiradi va kelgusi yangilanishlarda jamoamiz tomonidan oson o'zgartirishlar kiritish imkonini beradi.
Prefiks
Ko'pgina CSS o'zgaruvchilari o'z kod bazangiz bilan to'qnashuvlarning oldini olish uchun prefiksdan foydalanadilar. --Ushbu prefiks har bir CSS o'zgaruvchisida talab qilinadigan prefiksga qo'shimcha hisoblanadi .
Sass o'zgaruvchisi orqali prefiksni sozlang $prefix. Odatiy bo'lib, u o'rnatilgan bs-(oxirgi chiziqqa e'tibor bering).
Misollar
CSS o'zgaruvchilari Sass o'zgaruvchilariga o'xshash moslashuvchanlikni taklif qiladi, ammo brauzerga taqdim etilishidan oldin kompilyatsiya qilish kerak emas. Misol uchun, bu erda biz sahifamizning shriftini va CSS o'zgaruvchilari bilan bog'lanish uslublarini qayta o'rnatmoqdamiz.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Fokusli o'zgaruvchilar
5.3.0 versiyasiga qo'shilgan :focusBootstrap ixtiyoriy ravishda ma'lum komponentlar va elementlarga qo'shilishi mumkin bo'lgan Sass va CSS o'zgaruvchilari kombinatsiyasidan foydalangan holda maxsus uslublarni taqdim etadi . Biz hali global miqyosda barcha uslublarni bekor qilmaymiz :focus.
Sass-da biz kompilyatsiya qilishdan oldin moslashtirilishi mumkin bo'lgan standart qiymatlarni o'rnatamiz.
scss/_variables.scss
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
:rootKeyinchalik bu o'zgaruvchilar real vaqt rejimida sozlanishi mumkin bo'lgan darajali CSS o'zgaruvchilariga qayta tayinlanadi , shu jumladan variantlar xva yofsetlar bilan (birlamchi qaytarilish qiymati 0).
scss/_root.scss
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
Gridning uzilish nuqtalari
Biz tarmoqning uzilish nuqtalarini CSS o'zgaruvchilari sifatida kiritgan bo'lsak ham ( dan tashqari ), CSS o'zgaruvchilari media so'rovlarida ishlamasliginixs yodda tuting . Bu o'zgaruvchilar uchun CSS spetsifikatsiyasi dizayni bo'yicha, lekin kelgusi yillarda o'zgaruvchilarni qo'llab-quvvatlash bilan o'zgarishi mumkin . Ba'zi foydali havolalar uchun ushbu Stack Overflow javobini tekshiring . Shu bilan birga, siz ushbu o'zgaruvchilardan boshqa CSS holatlarida, shuningdek JavaScript-da foydalanishingiz mumkin.env()
Bootstrap-ning ishlab chiqarishga tayyor CSS va JavaScript-ni CDN orqali hech qanday qurish bosqichiga ehtiyoj sezmasdan ishga tushirishdan boshlang. Buni Bootstrap CodePen demosi bilan amalda ko'ring .

1.