Бүрэлдэхүүн хэсгүүд
Бид бараг бүх бүрэлдэхүүн хэсгүүдээ хэрхэн, яагаад хариу үйлдэл үзүүлэх чадвартай, үндсэн болон хувиргагч ангиудын тусламжтайгаар бүтээдэг болохыг олж мэдээрэй.
Суурь ангиуд
Bootstrap-ийн бүрэлдэхүүн хэсгүүд нь үндсэн өөрчлөлтийн нэр томъёогоор бүтээгдсэн байдаг. Бид аль болох олон хуваалцсан шинж чанаруудыг зэрэг үндсэн ангилалд бүлэглээд дараа нь хувилбар бүрийн хувийн хэв маягийг эсвэл .btn
гэх мэт өөрчлөгч ангиудад бүлэглэнэ ..btn-primary
.btn-success
Өөрчлөгч ангиудаа үүсгэхийн тулд бид Sass-ийн @each
гогцоог ашиглан Sass газрын зураг дээр давтдаг. Энэ нь ялангуяа манай бүрэлдэхүүн хэсгийн $theme-colors
хувилбаруудыг үүсгэх, таслах цэг бүрт хариу үйлдэл үзүүлэх хувилбаруудыг бий болгоход тустай. Та эдгээр Sass газрын зургийг өөрчилж, дахин эмхэтгэх үед эдгээр гогцоонд тусгагдсан өөрчлөлтүүдээ автоматаар харах болно.
Эдгээр гогцоонуудыг хэрхэн өөрчлөх, Bootstrap-ийн үндсэн хувиргагч хандлагыг өөрийн код руу хэрхэн өргөтгөх талаар манай Sass газрын зураг, гогцооны баримт бичгүүдийг шалгана уу .
Өөрчлөгч
Bootstrap-ийн ихэнх бүрэлдэхүүн хэсгүүд нь үндсэн-өөрчлөгч ангийн арга барилаар бүтээгдсэн. Энэ нь хэв маягийн дийлэнх хэсэг нь үндсэн ангид (жишээ нь, .btn
) агуулагдаж байхад хэв маягийн өөрчлөлтүүд нь өөрчлөх ангиудад (жишээ нь, .btn-danger
) хязгаарлагддаг гэсэн үг юм. Эдгээр хувиргагч ангиудыг $theme-colors
манай өөрчилсөн ангиудын тоо болон нэрийг өөрчлөхийн тулд газрын зургаас бүтээв.
Бид газрын зураг дээр давталт хийж , болон бүрэлдэхүүн хэсгүүдэд $theme-colors
хувиргагч үүсгэх хоёр жишээ энд байна ..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);
}
Хариуцлагатай
Эдгээр Сасс гогцоонууд нь өнгөт газрын зургаар хязгаарлагдахгүй. Та мөн бүрэлдэхүүн хэсгүүдийнхээ хариу үйлдэл үзүүлэх хувилбаруудыг үүсгэж болно. Жишээ нь, бид Sass газрын зургийн @each
гогцоог $grid-breakpoints
медиа асуулгатай хольж унадаг цэснүүдийн хариу тохируулгыг авч үзье.
// 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;
}
}
}
}
Хэрэв та өөрийн өгөгдлөө өөрчлөх $grid-breakpoints
юм бол таны өөрчлөлт тухайн газрын зураг дээр давтагдах бүх гогцоонд хэрэгжинэ.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Манай Sass газрын зураг болон хувьсагчдыг хэрхэн өөрчлөх тухай дэлгэрэнгүй мэдээлэл болон жишээнүүдийг Grid баримт бичгийн Sass хэсгээс үзнэ үү .
Өөрийгөө бүтээх
Bootstrap ашиглан өөрийн бүрэлдэхүүн хэсгүүдийг бүтээхдээ эдгээр удирдамжийг дагаж мөрдөхийг бид танд зөвлөж байна. Бид энэ хандлагыг өөрсдийн баримт бичиг болон жишээн дэх захиалгат бүрэлдэхүүн хэсгүүдэд өргөжүүлсэн. Бидний тайлбар зэрэг бүрэлдэхүүн хэсгүүд нь үндсэн болон хувиргагч анги бүхий бидний өгсөн бүрэлдэхүүн хэсгүүдийн нэгэн адил бүтээгдсэн.
<div class="callout">...</div>
Таны CSS-д та дараахтай төстэй зүйлтэй байх бөгөөд ихэнх загварчлалыг -р дамжуулан хийдэг .callout
. Дараа нь хувилбар бүрийн хоорондох өвөрмөц хэв маягийг өөрчлөх ангиар удирддаг.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Дуудлагын хувьд тэр өвөрмөц загвар нь ердөө л border-left-color
. Та уг үндсэн ангийг тэдгээр өөрчилсөн ангиудын аль нэгтэй хослуулснаар та өөрийн бүрэн бүрэлдэхүүний гэр бүлийг авах болно: