Farve
Bootstrap understøttes af et omfattende farvesystem, der tematiserer vores stilarter og komponenter. Dette muliggør mere omfattende tilpasning og udvidelse til ethvert projekt.
Tema farver
Vi bruger et undersæt af alle farver til at skabe en mindre farvepalet til generering af farveskemaer, også tilgængelig som Sass-variabler og et Sass-kort i Bootstraps scss/_variables.scss
fil.
Alle disse farver er tilgængelige som et Sass-kort, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Se vores Sass-kort og loops-dokumenter for, hvordan du ændrer disse farver.
Alle farver
Alle Bootstrap-farver er tilgængelige som Sass-variabler og et Sass-kort i scss/_variables.scss
fil. For at undgå øgede filstørrelser opretter vi ikke tekst- eller baggrundsfarveklasser for hver af disse variable. I stedet vælger vi en undergruppe af disse farver til en temapalet .
Sørg for at overvåge kontrastforhold, når du tilpasser farver. Som vist nedenfor har vi tilføjet tre kontrastforhold til hver af hovedfarverne – én for farveprøvens aktuelle farver, én for mod hvid og én for sort.
Noter om Sass
Sass kan ikke programmatisk generere variabler, så vi har manuelt oprettet variabler for hver farvetone og nuance selv. Vi angiver midtpunktsværdien (f.eks. $blue-500
) og bruger brugerdefinerede farvefunktioner til at tone (lyse) eller skygge (mørke) vores farver via Sass' mix()
farvefunktion.
Brug mix()
er ikke det samme som lighten()
og darken()
— førstnævnte blander den angivne farve med hvid eller sort, mens sidstnævnte kun justerer lysstyrken for hver farve. Resultatet er en meget mere komplet suite af farver, som vist i denne CodePen-demo .
Vores tint-color()
og shade-color()
funktioner bruges mix()
sammen med vores $theme-color-interval
variabel, som angiver en trinvis procentværdi for hver blandet farve, vi producerer. Se filen scss/_functions.scss
og scss/_variables.scss
for den fulde kildekode.
Farve Sass kort
Bootstraps kilde Sass-filer inkluderer tre kort, der hjælper dig med hurtigt og nemt at gå over en liste over farver og deres hex-værdier.
$colors
viser alle vores tilgængelige basisfarver (500
).$theme-colors
viser alle semantisk navngivne temafarver (vist nedenfor)$grays
viser alle nuancer og nuancer af grå
Indenfor scss/_variables.scss
finder du Bootstraps farvevariabler og Sass-kort. Her er et eksempel på $colors
Sass-kortet:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
Tilføj, fjern eller rediger værdier på kortet for at opdatere, hvordan de bruges i mange andre komponenter. Desværre på nuværende tidspunkt er det ikke alle komponenter, der bruger dette Sass-kort. Fremtidige opdateringer vil bestræbe sig på at forbedre dette. Indtil da, planlæg at gøre brug af ${color}
variablerne og dette Sass-kort.
Eksempel
Sådan kan du bruge disse i din Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Farve- og baggrundsfunktionsklasser er også tilgængelige til indstilling color
og background-color
brug af 500
farveværdierne.
Generering af hjælpeprogrammer
Tilføjet i v5.1.0
Bootstrap inkluderer ikke hjælpeprogrammer color
for background-color
hver farvevariabel, men du kan selv generere disse med vores utility API og vores udvidede Sass-kort tilføjet i v5.1.0.
- For at starte skal du sørge for, at du har importeret vores funktioner, variabler, mixins og hjælpeprogrammer.
- Brug vores
map-merge-multiple()
funktion til hurtigt at flette flere Sass-kort sammen i et nyt kort. - Flet dette nye kombinerede kort for at udvide ethvert hjælpeprogram med et
{color}-{level}
klassenavn.
Her er et eksempel, der genererer tekstfarveværktøjer (f.eks. .text-purple-500
) ved hjælp af ovenstående trin.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
Dette vil generere nye .text-{color}-{level}
hjælpeprogrammer for hver farve og niveau. Du kan også gøre det samme for enhver anden forsyning og ejendom.