Komponenter
Lær hvordan og hvorfor vi bygger næsten alle vores komponenter responsivt og med basis- og modifikatorklasser.
Basisklasser
Bootstraps komponenter er stort set bygget med en base-modifikator nomenklatur. Vi grupperer så mange delte egenskaber som muligt i en basisklasse, f.eks .btn
. , og grupperer derefter individuelle stilarter for hver variant i modifikatorklasser, f.eks . .btn-primary
eller .btn-success
.
For at bygge vores modifikatorklasser bruger vi Sass's @each
loops til at iterere over et Sass-kort. Dette er især nyttigt til at generere varianter af en komponent af vores $theme-colors
og skabe responsive varianter for hvert breakpoint. Når du tilpasser disse Sass-kort og kompilerer igen, vil du automatisk se dine ændringer afspejlet i disse loops.
Tjek vores Sass-kort og loops-dokumenter for, hvordan du tilpasser disse loops og udvider Bootstraps base-modifier-tilgang til din egen kode.
Modifikatorer
Mange af Bootstraps komponenter er bygget med en base-modifier klasse tilgang. Dette betyder, at hovedparten af stylingen er indeholdt i en basisklasse (f.eks. .btn
), mens stilvariationer er begrænset til modifikatorklasser (f.eks. .btn-danger
). Disse modifikatorklasser er bygget ud fra $theme-colors
kortet for at tilpasse antallet og navnet på vores modifikatorklasser.
Her er to eksempler på, hvordan vi sløjfer over $theme-colors
kortet for at generere modifikatorer til .alert
og - .list-group
komponenterne.
// 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);
}
Lydhør
Disse Sass-loops er heller ikke begrænset til farvekort. Du kan også generere responsive variationer af dine komponenter. Tag for eksempel vores responsive justering af rullemenuerne, hvor vi blander en @each
loop til $grid-breakpoints
Sass-kortet med en medieforespørgsel.
// 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;
}
}
}
}
Hvis du ændrer din $grid-breakpoints
, vil dine ændringer gælde for alle de løkker, der itererer over det pågældende kort.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
For mere information og eksempler på, hvordan man ændrer vores Sass-kort og variabler, henvises til Sass-sektionen i Grid-dokumentationen .
At skabe din egen
Vi opfordrer dig til at følge disse retningslinjer, når du bygger med Bootstrap for at skabe dine egne komponenter. Vi har selv udvidet denne tilgang til de brugerdefinerede komponenter i vores dokumentation og eksempler. Komponenter som vores billedforklaringer er bygget ligesom vores leverede komponenter med basis- og modifikationsklasser.
<div class="callout">...</div>
I din CSS vil du have noget som det følgende, hvor hovedparten af stylingen udføres via .callout
. Derefter styres de unikke stilarter mellem hver variant via modifikationsklasse.
// Base class
.callout {}
// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}
Til forklaringerne er den unikke styling bare en border-left-color
. Når du kombinerer den basisklasse med en af disse modifikatorklasser, får du din komplette komponentfamilie: