Komponendid
Siit saate teada, kuidas ja miks me ehitame peaaegu kõiki oma komponente reageerivalt ning baas- ja modifikaatoriklassidega.
Baasklassid
Bootstrapi komponendid on suures osas ehitatud baasmodifikaatori nomenklatuuriga. Grupeerime võimalikult palju jagatud omadusi põhiklassidesse (nt .btn
) ja seejärel rühmitame iga variandi individuaalsed stiilid modifikaatoriklassidesse, nagu .btn-primary
või .btn-success
.
Oma modifikaatoriklasside koostamiseks kasutame @each
Sassi kaartide itereerimiseks Sassi silmuseid. See on eriti kasulik meie poolt komponendi variantide genereerimiseks $theme-colors
ja iga katkestuspunkti jaoks tundlike variantide loomiseks. Kui kohandate neid Sassi kaarte ja kompileerite uuesti, näete nendes tsüklites automaatselt oma muudatusi.
Vaadake meie Sassi kaartide ja silmuste dokumente , et neid silmuseid kohandada ja Bootstrapi baasmodifikaatori lähenemisviisi oma koodile laiendada.
Modifikaatorid
Paljud Bootstrapi komponendid on ehitatud baasmodifikaatori klassi lähenemisviisiga. See tähendab, et suurem osa stiilist sisaldub põhiklassis (nt .btn
), samas kui stiilivariatsioonid on piiratud modifikaatoriklassidega (nt .btn-danger
). Need modifikaatoriklassid on koostatud $theme-colors
kaardist, et saaksime kohandada meie modifikaatoriklasside arvu ja nimesid.
Siin on kaks näidet selle kohta, kuidas me teeme $theme-colors
kaardi .alert
ja .list-group
komponentide modifikaatorite genereerimiseks.
// 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);
}
Vastutulelik
Need Sassi silmused ei piirdu ka värvikaartidega. Samuti saate luua oma komponentidest reageerivaid variatsioone. Võtke näiteks meie reageeriv rippmenüüde joondamine, kus segame Sassi kaardi @each
silmuse $grid-breakpoints
meediumipäringuga.
// 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;
}
}
}
}
Kui muudate oma $grid-breakpoints
, rakenduvad teie muudatused kõikidele sellel kaardil korduvatele silmustele.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Lisateavet ja näiteid meie Sassi kaartide ja muutujate muutmise kohta leiate Gridi dokumentatsiooni Sassi jaotisest .
Oma loomine
Soovitame teil oma komponentide loomiseks Bootstrapiga ehitamisel neid juhiseid järgida. Oleme seda lähenemist laiendanud ka kohandatud komponentidele meie dokumentatsioonis ja näidetes. Sellised komponendid nagu meie tähelepanulaiendid on ehitatud täpselt nagu meie pakutavad komponendid koos põhi- ja modifikaatoriklassidega.
<div class="callout">...</div>
Teie CSS-is oleks midagi sellist, kus suurem osa stiili kujundamisest tehakse .callout
. Seejärel juhitakse iga variandi vahelisi unikaalseid stiile modifikaatoriklassi kaudu.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Viiktekstide jaoks on see ainulaadne stiil lihtsalt border-left-color
. Kui ühendate selle põhiklassi ühega neist modifikaatoriklassidest, saate oma täieliku komponendiperekonna: