Komponentët
Mësoni se si dhe pse i ndërtojmë pothuajse të gjithë komponentët tanë në mënyrë të përgjegjshme dhe me klasa bazë dhe modifikues.
Klasat bazë
Komponentët e Bootstrap janë ndërtuar kryesisht me një nomenklaturë të modifikuesit bazë. Ne grupojmë sa më shumë veti të përbashkëta të jetë e mundur në një klasë bazë, si .btn
, dhe më pas grupojmë stilet individuale për çdo variant në klasa modifikuese, si .btn-primary
ose .btn-success
.
Për të ndërtuar klasat tona të modifikuesve, ne përdorim unazat e Sass për @each
të përsëritur mbi një hartë Sass. Kjo është veçanërisht e dobishme për gjenerimin e varianteve të një komponenti nga ana jonë $theme-colors
dhe krijimin e varianteve të përgjegjshme për çdo pikë ndërprerjeje. Ndërsa personalizoni këto harta Sass dhe ripërpiloni, do të shihni automatikisht ndryshimet tuaja të pasqyruara në këto sythe.
Shikoni hartat tona Sass dhe dokumentet e sytheve se si t'i personalizoni këto sythe dhe të zgjeroni qasjen e modifikuesit bazë të Bootstrap në kodin tuaj.
Modifikuesit
Shumë nga komponentët e Bootstrap janë ndërtuar me një qasje të klasës së modifikuesit bazë. Kjo do të thotë se pjesa më e madhe e stilimit përmbahet në një klasë bazë (p.sh., .btn
) ndërsa variacionet e stilit kufizohen në klasa modifikuese (p.sh., .btn-danger
). Këto klasa modifikuesi janë ndërtuar nga $theme-colors
harta për të bërë personalizimin e numrit dhe emrit të klasave tona të modifikuesve.
Këtu janë dy shembuj se si ne kalojmë në $theme-colors
hartë për të gjeneruar modifikues të komponentëve .alert
dhe ..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);
}
Të përgjegjshme
Këto sythe Sass nuk kufizohen as në hartat me ngjyra. Ju gjithashtu mund të gjeneroni variacione të përgjegjshme të komponentëve tuaj. Merrni për shembull shtrirjen tonë të përgjegjshme të listës rënëse ku ne përziejmë një @each
lak për $grid-breakpoints
hartën Sass me një kërkesë mediatike.
// 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;
}
}
}
}
Nëse modifikoni $grid-breakpoints
, ndryshimet tuaja do të zbatohen për të gjitha sythe që përsëriten mbi atë hartë.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Për më shumë informacion dhe shembuj se si të modifikojmë hartat dhe variablat tona Sass, ju lutemi referojuni seksionit Sass të dokumentacionit Grid .
Duke krijuar tuajën
Ne ju inkurajojmë që të miratoni këto udhëzime kur ndërtoni me Bootstrap për të krijuar komponentët tuaj. Ne e kemi zgjeruar vetë këtë qasje tek komponentët e personalizuar në dokumentacionin dhe shembujt tanë. Komponentët si thirrjet tona janë ndërtuar ashtu si komponentët tanë të ofruar me klasa bazë dhe modifikues.
<div class="callout">...</div>
Në CSS tuaj, do të kishit diçka si më poshtë ku pjesa më e madhe e stilimit bëhet përmes .callout
. Më pas, stilet unike ndërmjet secilit variant kontrollohen nëpërmjet klasës së modifikuesit.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Për thirrjet, ai stil unik është vetëm një border-left-color
. Kur kombinoni atë klasë bazë me një nga ato klasa modifikuesish, ju merrni familjen tuaj të plotë të komponentëve: