Farge
Bootstrap støttes av et omfattende fargesystem som tematiserer stilene og komponentene våre. Dette muliggjør mer omfattende tilpasning og utvidelse for ethvert prosjekt.
Temafarger
Vi bruker et undersett av alle farger for å lage en mindre fargepalett for å generere fargeskjemaer, også tilgjengelig som Sass-variabler og et Sass-kart i Bootstraps scss/_variables.scss
fil.
Alle disse fargene er tilgjengelige som et Sass-kart, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Sjekk ut våre Sass-kart og loops-dokumenter for hvordan du endrer disse fargene.
Alle farger
Alle Bootstrap-farger er tilgjengelige som Sass-variabler og et Sass-kart i scss/_variables.scss
fil. For å unngå økte filstørrelser lager vi ikke tekst- eller bakgrunnsfargeklasser for hver av disse variablene. I stedet velger vi en undergruppe av disse fargene for en temapalett .
Sørg for å overvåke kontrastforhold når du tilpasser farger. Som vist nedenfor har vi lagt til tre kontrastforhold til hver av hovedfargene – én for fargeprøvens nåværende farger, én mot hvit og én mot svart.
Merknader om Sass
Sass kan ikke programmatisk generere variabler, så vi laget manuelt variabler for hver fargetone og nyanse selv. Vi spesifiserer midtpunktsverdien (f.eks. $blue-500
) og bruker egendefinerte fargefunksjoner for å tone (lyse opp) eller skygge (mørke) fargene våre via Sass sin mix()
fargefunksjon.
Bruk mix()
er ikke det samme som lighten()
og darken()
— førstnevnte blander den angitte fargen med hvit eller svart, mens sistnevnte bare justerer lysstyrken til hver farge. Resultatet er en mye mer komplett serie med farger, som vist i denne CodePen-demoen .
Vår tint-color()
og shade-color()
funksjoner brukes mix()
sammen med $theme-color-interval
variabelen vår, som spesifiserer en trinnvis prosentverdi for hver blandede farge vi produserer. Se filene scss/_functions.scss
og scss/_variables.scss
for hele kildekoden.
Farge Sass kart
Bootstraps kilde Sass-filer inkluderer tre kart som hjelper deg raskt og enkelt å gå over en liste over farger og deres hex-verdier.
$colors
viser alle våre tilgjengelige500
grunnfarger ( ).$theme-colors
viser alle semantisk navngitte temafarger (vist nedenfor)$grays
viser alle nyanser og nyanser av grått
Innenfor scss/_variables.scss
finner du Bootstraps fargevariabler og Sass-kart. Her er et eksempel på $colors
Sass-kartet:
$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
);
Legg til, fjern eller endre verdier i kartet for å oppdatere hvordan de brukes i mange andre komponenter. Dessverre på dette tidspunktet er det ikke alle komponenter som bruker dette Sass-kartet. Fremtidige oppdateringer vil forsøke å forbedre dette. Inntil da, planlegg å bruke ${color}
variablene og dette Sass-kartet.
Eksempel
Slik kan du bruke disse i din Sass:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Farge- og bakgrunnsverktøyklasser er også tilgjengelige for innstilling color
og background-color
bruk av 500
fargeverdiene.
Generer verktøy
Lagt til i v5.1.0
Bootstrap inkluderer ikke color
verktøy background-color
for hver fargevariabel, men du kan generere disse selv med vår verktøy-API og våre utvidede Sass-kart lagt til i v5.1.0.
- For å starte, sørg for at du har importert funksjonene, variablene, mixins og verktøyene våre.
- Bruk
map-merge-multiple()
funksjonen vår til å raskt slå sammen flere Sass-kart i et nytt kart. - Slå sammen dette nye kombinerte kartet for å utvide ethvert verktøy med et
{color}-{level}
klassenavn.
Her er et eksempel som genererer tekstfargeverktøy (f.eks. .text-purple-500
) ved å bruke trinnene ovenfor.
@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}
verktøy for hver farge og nivå. Du kan også gjøre det samme for alle andre verktøy og eiendommer.