Komponentai
Sužinokite, kaip ir kodėl mes kuriame beveik visus savo komponentus reaguojant į bazines ir modifikavimo klases.
Bazinės klasės
„Bootstrap“ komponentai daugiausia sukurti naudojant bazinio modifikatoriaus nomenklatūrą. Sugrupuojame kuo daugiau bendrinamų savybių į bazinę klasę, pvz .btn
., , tada sugrupuojame atskirus kiekvieno varianto stilius į modifikavimo klases, pvz ., .btn-primary
arba .btn-success
.
Norėdami sukurti modifikatorių klases, naudojame Sass @each
kilpas, kad kartotume per Sass žemėlapį. Tai ypač naudinga generuojant mūsų komponento $theme-colors
variantus ir kuriant reaguojančius variantus kiekvienam pertraukos taškui. Kai tinkinate šiuos Sass žemėlapius ir iš naujo kompiliuojate, automatiškai matysite pakeitimus, kurie atsispindės šiose kilpose.
Peržiūrėkite mūsų Sass žemėlapių ir kilpų dokumentus , kaip tinkinti šias kilpas ir išplėsti „Bootstrap“ bazinio modifikatoriaus metodą savo kodui.
Modifikatoriai
Daugelis „Bootstrap“ komponentų yra sukurti naudojant bazinio modifikatoriaus klasės metodą. Tai reiškia, kad didžioji stiliaus dalis yra pagrindinėje klasėje (pvz., .btn
), o stiliaus variantai apsiriboja modifikavimo klasėmis (pvz., .btn-danger
). Šios modifikavimo klasės yra sukurtos iš $theme-colors
žemėlapio, kad būtų galima tinkinti mūsų modifikatorių klasių skaičių ir pavadinimą.
Čia pateikiami du pavyzdžiai, kaip pereiname per $theme-colors
žemėlapį, kad sugeneruotume .alert
ir .list-group
komponentų modifikatorius.
// 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);
}
Atsakingas
Šios Sass kilpos taip pat neapsiriboja spalvų žemėlapiais. Taip pat galite sukurti reaguojančius komponentų variantus. Paimkite, pavyzdžiui, mūsų atsakingą išskleidžiamųjų meniu derinimą, kai sumaišome Sass žemėlapio @each
kilpą $grid-breakpoints
su medijos užklausa.
// 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;
}
}
}
}
Jei pakeisite savo $grid-breakpoints
, jūsų pakeitimai bus taikomi visoms kilpoms, kartojančioms tą žemėlapį.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Daugiau informacijos ir pavyzdžių, kaip modifikuoti Sass žemėlapius ir kintamuosius, rasite tinklelio dokumentacijos Sass skyriuje .
Kurti savo
Rekomenduojame vadovautis ��iomis gairėmis, kai kuriate naudodami „Bootstrap“, kad sukurtumėte savo komponentus. Mes išplėtėme šį požiūrį į pasirinktinius komponentus savo dokumentuose ir pavyzdžiuose. Komponentai, tokie kaip mūsų figūrinės išnašos, yra sukurti kaip mūsų pateikti komponentai su bazinėmis ir modifikavimo klasėmis.
<div class="callout">...</div>
Savo CSS turėtumėte kažką panašaus į toliau pateiktą, kur didžioji dalis stiliaus kūrimo atliekama naudojant .callout
. Tada unikalūs stiliai tarp kiekvieno varianto yra valdomi per modifikatorių klasę.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Figūrinėms išnašoms tas unikalus stilius yra tik border-left-color
. Sujungę tą bazinę klasę su viena iš tų modifikatorių klasių, gausite visą komponentų šeimą: