Swiphemu swa kona
Dyondza ndlela na leswaku ha yini hi aka kwalomu ka swiphemu swa hina hinkwaswo hi ku hlamula na hi titlilasi ta xisekelo na ta ku cinca.
Titlilasi ta xisekelo
Swiphemu swa Bootstrap swi akiwile ngopfu hi mavito ya base-modifier. Hi hlengeleta swihlawulekisi swo tala leswi avelaniwa hilaha swi nga kotekaka hakona eka tlilasi ya le hansi, ku fana na .btn
, ivi hi hlengeleta switayele swa munhu hi xiyexe swa muxaka wun’wana na wun’wana eka titlilasi ta mucinci, ku fana na .btn-primary
kumbe .btn-success
.
Ku aka titlilasi ta hina ta vacinci, hi tirhisa @each
swirhendzevutana swa Sass ku phindha-phindha ehenhla ka mepe wa Sass. Leswi swi pfuna ngopfu eka ku tumbuluxa swihlawulekisi swa xiphemu hi hina $theme-colors
na ku tumbuluxa swihlawulekisi leswi hlamulaka eka breakpoint yin’wana na yin’wana. Loko u ri karhi u lulamisa mimepe leyi ya Sass ni ku hlengeleta nakambe, u ta vona hi ku tisungulela ku cinca ka wena ku kombisiwa eka swirhendzevutana leswi.
Languta mimepe ya hina ya Sass na tidoki ta swirhendzevutani ku kuma ndlela yo lulamisa swirhendzevutani leswi na ku andlala ndlela ya Bootstrap ya base-modifier eka khodi ya wena.
Swilo leswi cinca-cincaka
Swiphemu swo tala swa Bootstrap swi akiwile hi endlelo ra tlilasi ya base-modifier. Leswi swi vula leswaku xiphemu lexikulu xa xitayili xi khomiwile eka tlilasi ya le hansi (xikombiso, .btn
) kasi ku hambana ka xitayili ku pfaleriwile eka titlilasi ta vacinci (xikombiso, .btn-danger
). Titlilasi leti ta vacinci ti akiwile ku suka eka $theme-colors
mepe ku endla ku customizing nomboro na vito ra titlilasi ta hina ta vacinci.
Hi leswi swikombiso swimbirhi swa ndlela leyi hi rhendzelekaka ehenhla ka $theme-colors
mepe ku humesa swihundzuluxi eka swiphemu swa .alert
na .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);
}
Ku hlamula
Ti loop leti ta Sass a ti pimiwi eka mimepe ya mihlovo ntsena, na tona. U nga ha tlhela u humesa ku hambana loku hlamulaka ka swiphemu swa wena. Teka xikombiso ku ringanisa ka hina loku hlamulaka ka swilo leswi nga ehansi laha hi hlanganisaka @each
xirhendzevutana xa $grid-breakpoints
mepe wa Sass na xivutiso xa midiya lexi katsaka.
// 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;
}
}
}
}
Loko u fanele ku cinca $grid-breakpoints
, ku cinca ka wena ku ta tirha eka swirhendzevutana hinkwaswo leswi vuyeleriwaka ehenhla ka mepe wolowo.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Ku kuma vuxokoxoko byo tala na swikombiso swa ndlela yo cinca mimepe ya hina ya Sass na swilo leswi cinca-cincaka, hi kombela u languta eka xiyenge xa Sass xa matsalwa ya Gridi .
Ku tumbuluxa swa wena
Hi ku khutaza ku amukela swiletelo leswi loko u aka hi Bootstrap ku tiendlela swiphemu swa wena. Hi ndlandlamuxe endlelo leri hi hexe eka swiphemu swa ntolovelo eka matsalwa ya hina na swikombiso. Swiphemu swo fana na ti callouts ta hina swi akiwile ku fana na swiphemu swa hina leswi hi nyikiweke swona leswi nga na titlilasi ta base na modifier.
<div class="callout">...</div>
Eka CSS ya wena, u ta va na nchumu wo fana na lowu landzelaka laha xiphemu lexikulu xa xitayili xi endliwaka hi ku tirhisa .callout
. Kutani, switayele swo hlawuleka exikarhi ka muxaka wun’wana ni wun’wana swi lawuriwa hi ku tirhisa tlilasi ya mucinci.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Eka swikombelo, xitayili xexo xo hlawuleka i border-left-color
. Loko u hlanganisa tlilasi yoleyo ya le hansi na yin’wana ya titlilasi toleto ta mucinci, u kuma ndyangu wa wena lowu heleleke wa swiphemu: