Komponen
Ketahui cara dan sebab kami membina hampir semua komponen kami secara responsif dan dengan kelas asas dan pengubah suai.
Kelas asas
Komponen Bootstrap sebahagian besarnya dibina dengan tatanama pengubah suai asas. Kami mengumpulkan seberapa banyak sifat kongsi yang mungkin ke dalam kelas asas, seperti .btn
, dan kemudian mengumpulkan gaya individu untuk setiap varian ke dalam kelas pengubah suai, seperti .btn-primary
atau .btn-success
.
Untuk membina kelas pengubah suai kami, kami menggunakan @each
gelung Sass untuk mengulangi peta Sass. Ini amat berguna untuk menjana varian komponen oleh kami $theme-colors
dan mencipta varian responsif untuk setiap titik putus. Semasa anda memperibadikan peta Sass ini dan menyusun semula, anda akan melihat perubahan anda secara automatik ditunjukkan dalam gelung ini.
Lihat dokumen peta dan gelung Sass kami untuk cara menyesuaikan gelung ini dan melanjutkan pendekatan pengubah suai asas Bootstrap kepada kod anda sendiri.
Pengubah suai
Banyak komponen Bootstrap dibina dengan pendekatan kelas pengubah asas. Ini bermakna sebahagian besar penggayaan terkandung pada kelas asas (cth, .btn
) manakala variasi gaya terhad kepada kelas pengubah suai (cth, .btn-danger
). Kelas pengubah suai ini dibina daripada $theme-colors
peta untuk membuat penyesuaian nombor dan nama kelas pengubah suai kami.
Berikut ialah dua contoh cara kita melingkari $theme-colors
peta untuk menjana pengubah kepada komponen .alert
dan ..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);
}
Responsif
Gelung Sass ini juga tidak terhad kepada peta warna. Anda juga boleh menjana variasi responsif komponen anda. Sebagai contoh, penjajaran responsif kami pada lungsur turun di mana kami mencampurkan @each
gelung untuk $grid-breakpoints
peta Sass dengan termasuk pertanyaan media.
// 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;
}
}
}
}
Sekiranya anda mengubah suai anda $grid-breakpoints
, perubahan anda akan digunakan pada semua gelung yang berulang di atas peta itu.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Untuk mendapatkan maklumat lanjut dan contoh tentang cara mengubah suai peta dan pembolehubah Sass kami, sila rujuk bahagian Sass dalam dokumentasi Grid .
Mencipta sendiri
Kami menggalakkan anda untuk menerima pakai garis panduan ini apabila membina dengan Bootstrap untuk mencipta komponen anda sendiri. Kami telah meluaskan pendekatan ini sendiri kepada komponen tersuai dalam dokumentasi dan contoh kami. Komponen seperti serlahan ciri kami dibina sama seperti komponen yang kami sediakan dengan kelas asas dan pengubah suai.
<div class="callout">...</div>
Dalam CSS anda, anda akan mempunyai sesuatu seperti berikut di mana sebahagian besar penggayaan dilakukan melalui .callout
. Kemudian, gaya unik antara setiap varian dikawal melalui kelas pengubah suai.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Untuk butiran, penggayaan unik itu hanyalah border-left-color
. Apabila anda menggabungkan kelas asas itu dengan salah satu daripada kelas pengubah suai tersebut, anda mendapat keluarga komponen lengkap anda: