Ba composants
Yekola ndenge nini mpe mpo na nini totonga pene na ba composants na biso nionso na ndenge ya koyanola mpe na ba classes ya base mpe ya modificateur.
Ba kelasi ya base
Ba composants ya Bootstrap etongami mingi na nomenclature ya base-modifier. Tosangisi ba propriétés ebele ya kokabola na kelasi ya base, lokola .btn
, mpe na sima tosangisi ba styles moko moko mpo na variante moko na moko na ba classes ya modificateur, lokola .btn-primary
to .btn-success
.
Pona kotonga ba classes na biso ya modificateur, tosalelaka ba @each
boucles ya Sass pona ko iterer likolo ya carte ya Sass. Yango ezali surtout utile pona ko générer ba variantes ya composante moko par notre $theme-colors
pe ko créer ba variantes responsives pona point de rupture moko na moko. Lokola ozali ko personnaliser ba cartes oyo ya Sass mpe ko recompiler, okomona automatiquement ba changements na yo ezo refleter na ba boucles oyo.
Tala ba cartes na biso ya Sass na ba docs ya ba boucles pona ndenge ya ko personnaliser ba boucles oyo pe ko extend approche ya base-modifier ya Bootstrap na code na yo moko.
Ba modificateurs
Mingi ya ba composants ya Bootstrap etongami na approche ya classe base-modifier. Yango elingi koloba ete eteni monene ya lolenge ya kosala ezali na kelasi ya moboko (ndakisa, .btn
) nzokande mbongwana ya lolenge ekangami na kelasi ya mobongisi (ndakisa, .btn-danger
). Ba classes oyo ya modificateur etongami à partir ya $theme-colors
carte pona kosala personnalisation ya nombre na kombo ya ba classes na biso ya modificateur.
Tala bandakisa mibale ya ndenge tozali kosala boucle likolo ya $theme-colors
carte mpo na kobimisa ba modificateurs na ba composants .alert
mpe ..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);
}
Koyanola
Ba boucles oyo ya Sass ekangami kaka na ba cartes ya couleur te, pe. Okoki mpe kobimisa ba variations responsives ya ba composants na yo. Bozua par exemple alignment na biso ya réponse ya ba dropdowns esika to mélanger @each
boucle moko pona $grid-breakpoints
carte Sass na requête ya media inclure.
// 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;
}
}
}
}
Soki osengeli kobongisa $grid-breakpoints
, mbongwana na yo ekosalema na ba boucles nyonso oyo ezali kozongela likoló ya karte yango.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Mpo na koyeba makambo mingi mpe bandakisa ya ndenge ya kobongisa ba cartes mpe ba variables na biso ya Sass, tala eteni ya Sass ya mikanda ya Grid .
Kosala oyo ya yo moko
Tozali kolendisa yo ozwa malako oyo ntango ozali kotonga na Bootstrap mpo na kosala ba composants na yo moko. Topanzani biso moko ndenge oyo na ba composants personnalisés na mikanda mpe bandakisa na biso. Ba composants lokola ba callouts na biso etongami kaka lokola ba composants na biso oyo topesi na ba classes ya base na modificateur.
<div class="callout">...</div>
Na CSS na yo, olingaki kozala na eloko lokola oyo elandi esika eteni monene ya styling esalemaka na nzela ya .callout
. Na sima, ba styles unique entre chaque variante ezali contrôlé via classe modificateur.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Mpo na ba callouts, styling wana oyo ekokani na mosusu te ezali kaka border-left-color
. Tango osangisi classe wana ya base na moko ya ba classes wana ya modificateur, ozui famille na yo ya composant complet: