Di tin dɛn we de insay di bɔdi
Lan aw ɛn wetin mek wi de bil klos to ɔl wi kɔmpɔnɛnt dɛn we de ansa ɛn wit bays ɛn modifya klas dɛn.
Base klas dɛn
Bootstrap in komponent dɛn big wan bil wit wan bays-modifaya nomenklachɔ. Wi de grup bɔku shered prɔpati dɛn as pɔsibul insay wan bays klas, lɛk .btn
, ɛn afta dat wi grup wan wan stayl dɛn fɔ ɛni vayriɔnt insay modifya klas dɛn, lɛk .btn-primary
ɔ .btn-success
.
Fɔ bil wi modifya klas dɛn, wi de yuz Sass in @each
lɔp dɛn fɔ itɛrayt oba wan Sass map. Dis na spεshal εp fכ jεnarεt vεryכnt dεm fכ wan kכmכpכnt bay wi $theme-colors
εn kriyayt rεspכnsiv vεryכnt dεm fכ εvri brekpכynt. As yu de kɔstɔmayz dɛn Sass map dɛn ya ɛn kɔmpilayt bak, yu go ɔtomɛtik si yu chenj dɛn we de sho na dɛn lɔp dɛn ya.
Chek wi Sass map ɛn loops docs fɔ aw fɔ kɔstɔmayz dɛn loops ya ɛn ɛkstɛnd Bootstrap in bays-modifier aprɔch to yu yon kɔd.
Di wan dɛn we de chenj di tin dɛn
Bɔku pan Bootstrap in kɔmpɔnɛnt dɛn bil wit wan bays-mɔdifaya klas aprɔch. Dis min se di bɔku bɔku stayl de insay wan bays klas (ɛgz., .btn
) we di stayl chenj dɛn de kɔnfyus to modifya klas dɛn (ɛgz., .btn-danger
). Dɛn bil dɛn modifya klas ya frɔm di $theme-colors
map fɔ mek kɔstɔmayz di nɔmba ɛn nem fɔ wi modifya klas dɛn.
Na tu ɛgzampul dɛn ya bɔt aw wi de lɔp oba di $theme-colors
map fɔ jenarayz modifya dɛn to di .alert
ɛn .list-group
kɔmpɔnɛnt dɛn.
// 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);
}
Fɔ ansa
Dis Sass loops nor de limited to kala map, tu. Yu kin jεnarεt rεspכns vεryushכn dεm bak fכ yu kכmכpכnt dεm. Tek fɔ ɛgzampul wi rispɔnsiv alaynɛshɔn fɔ di drɔpdɔwn dɛn usay wi miks wan @each
lɔp fɔ di $grid-breakpoints
Sass map wit wan midia kwɛstyɔn inklud.
// 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;
}
}
}
}
If yu chenj yu $grid-breakpoints
, yu chenj dɛn go aplay to ɔl di lɔp dɛn we de itɛrayt oba da map de.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Fɔ no mɔ ɛn ɛgzampul dɛn bɔt aw fɔ chenj wi Sass map ɛn vɛriɔbul dɛn, duya luk na di Sass sɛkshɔn na di Grid dɔkyumentri .
Fɔ mek yu yon
Wi de ɛnkɔrej yu fɔ adopt dɛn gaydlayn ya we yu de bil wit Bootstrap fɔ mek yu yon kɔmpɔnɛnt dɛn. Wi dɔn ɛkstɛnd dis we fɔ du tin wisɛf to di kɔstɔm kɔmpɔnɛnt dɛn we de na wi dɔkyumentri ɛn ɛgzampul dɛn. Kɔmpɔnɛnt dɛn lɛk wi kɔlɔut dɛn bil jɔs lɛk wi kɔmpɔnɛnt dɛn we wi dɔn gi wit bays ɛn modifya klas dɛn.
<div class="callout">...</div>
Insay yu CSS, yu go gɛt sɔntin lɛk di wan dɛn we de dɔŋ ya usay dɛn kin du bɔku pan di stayl via .callout
. Dɔn, di yunik stayl dɛn bitwin ɛni vayriɔnt de kɔntrol via modifya klas.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Fɔ di kɔl-ɔut dɛn, da spɛshal stayl de na jɔs wan border-left-color
. We yu jɔyn da bays klas de wit wan pan dɛn modifya klas dɛn de, yu kin gɛt yu kɔmplit kɔmpɔnɛnt famili: