Komponentlar
Qanday qilib va nima uchun biz deyarli barcha komponentlarimizni sezgir, asosiy va modifikator sinflari bilan qurishimizni bilib oling.
Asosiy sinflar
Bootstrap komponentlari asosan asosiy modifikator nomenklaturasi bilan qurilgan. Biz imkon qadar ko'proq umumiy xususiyatlarni kabi asosiy sinfga to'playmiz .btn
va keyin har bir variant uchun individual uslublarni .btn-primary
yoki kabi modifikator sinflariga guruhlaymiz .btn-success
.
Modifikator sinflarimizni yaratish uchun biz @each
Sass xaritasini takrorlash uchun Sass's looplaridan foydalanamiz. Bu, ayniqsa, bizning komponentimiz $theme-colors
variantlarini yaratish va har bir to'xtash nuqtasi uchun javob beruvchi variantlarni yaratish uchun foydalidir. Ushbu Sass xaritalarini moslashtirganingiz va qayta kompilyatsiya qilganingizdan so'ng, avtomatik ravishda o'zgartirishlaringiz ushbu tsikllarda aks ettirilganini ko'rasiz.
Ushbu tsikllarni qanday sozlash va Bootstrap-ning asosiy modifikator yondashuvini o'z kodingizga kengaytirish uchun bizning Sass xaritalari va halqalari hujjatlarini ko'rib chiqing.
Modifikatorlar
Bootstrap-ning ko'pgina komponentlari asosiy modifikator sinfi yondashuvi bilan qurilgan. Bu shuni anglatadiki, uslubning asosiy qismi asosiy sinfga (masalan, .btn
) kiritilgan, uslub o'zgarishlari esa modifikator sinflari bilan chegaralangan (masalan, .btn-danger
). $theme-colors
Ushbu modifikator sinflari bizning modifikator sinflarimiz soni va nomini sozlash uchun xaritadan qurilgan .
Mana va komponentlarga $theme-colors
modifikatorlar yaratish uchun xaritani qanday aylantiramiz..alert
.list-group
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
Javobgar
Ushbu Sass halqalari ham rangli xaritalar bilan cheklanmaydi. Siz komponentlaringizning sezgir o'zgarishlarini ham yaratishingiz mumkin. Misol uchun, biz Sass xaritasi uchun @each
tsiklni $grid-breakpoints
media so'rovi bilan aralashtiradigan ochiladigan ro'yxatlarning sezgir tekislanishini olaylik.
// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-start {
--bs-position: start;
&[data-bs-popper] {
right: auto;
left: 0;
}
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
&[data-bs-popper] {
right: 0;
left: auto;
}
}
}
}
Agar siz $grid-breakpoints
ni o'zgartirsangiz, o'zgartirishlaringiz ushbu xaritada takrorlanadigan barcha tsikllarga qo'llaniladi.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Sass xaritalarimiz va o'zgaruvchilarimizni qanday o'zgartirish haqida qo'shimcha ma'lumot va misollar uchun Grid hujjatlarining Sass bo'limiga qarang .
O'zingizni yaratish
O'z komponentlaringizni yaratish uchun Bootstrap bilan qurishda ushbu ko'rsatmalarga amal qilishingizni tavsiya qilamiz. Biz ushbu yondashuvni hujjatlarimiz va misollarimizdagi maxsus komponentlarga kengaytirdik. Bizning qo'ng'iroqlarimiz kabi komponentlar xuddi tayanch va modifikator sinflari bilan taqdim etilgan komponentlarimiz kabi qurilgan.
<div class="callout">...</div>
Sizning CSS-da siz quyidagi kabi narsaga ega bo'lasiz, bu erda uslubning asosiy qismi orqali amalga oshiriladi .callout
. Keyin har bir variant orasidagi noyob uslublar modifikator sinfi orqali boshqariladi.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Qo'ng'iroqlar uchun bu noyob uslub shunchaki border-left-color
. Ushbu asosiy sinfni ushbu modifikator sinflaridan biri bilan birlashtirganingizda, siz to'liq komponentlar oilasiga ega bo'lasiz: