Theming Bootstrap
Tilpass Bootstrap 4 med våre nye innebygde Sass-variabler for globale stilpreferanser for enkle tema- og komponentendringer.
Introduksjon
I Bootstrap 3 ble tematikken i stor grad drevet av variable overstyringer i LESS, tilpasset CSS og et eget temastilark som vi inkluderte i dist
filene våre. Med litt innsats kunne man fullstendig redesigne utseendet til Bootstrap 3 uten å berøre kjernefilene. Bootstrap 4 gir en kjent, men litt annerledes tilnærming.
Nå er tematisering oppnådd av Sass-variabler, Sass-kart og tilpasset CSS. Det er ikke noe mer dedikert temastilark; i stedet kan du aktivere det innebygde temaet for å legge til gradienter, skygger og mer.
Sass
Bruk Sass-kildefilene våre for å dra nytte av variabler, kart, mixins og mer når du kompilerer Sass ved å bruke din egen eiendelpipeline.
Filstruktur
Når det er mulig, unngå å endre Bootstraps kjernefiler. For Sass betyr det å lage ditt eget stilark som importerer Bootstrap slik at du kan endre og utvide det. Forutsatt at du bruker en pakkebehandling som npm, vil du ha en filstruktur som ser slik ut:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Hvis du har lastet ned kildefilene våre og ikke bruker en pakkebehandling, vil du manuelt sette opp noe som ligner på den strukturen, og holde Bootstraps kildefiler atskilt fra dine egne.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importerer
I din custom.scss
vil du importere Bootstraps kilde Sass-filer. Du har to alternativer: ta med hele Bootstrap, eller velg delene du trenger. Vi oppfordrer sistnevnte, men vær oppmerksom på at det er noen krav og avhengigheter på tvers av komponentene våre. Du må også inkludere litt JavaScript for våre plugins.
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
Med det oppsettet på plass kan du begynne å endre alle Sass-variablene og kartene i custom.scss
. Du kan også begynne å legge til deler av Bootstrap under // Optional
seksjonen etter behov. Vi foreslår at du bruker hele importstabelen fra bootstrap.scss
filen vår som utgangspunkt.
Variable standardinnstillinger
Hver Sass-variabel i Bootstrap inkluderer !default
flagget som lar deg overstyre variabelens standardverdi i din egen Sass uten å endre Bootstraps kildekode. Kopier og lim inn variabler etter behov, endre verdiene og fjern !default
flagget. Hvis en variabel allerede er tildelt, vil den ikke bli tildelt på nytt av standardverdiene i Bootstrap.
Du finner den komplette listen over Bootstraps variabler i scss/_variables.scss
. Noen variabler er satt til null
, disse variablene gir ikke ut egenskapen med mindre de er overstyrt i konfigurasjonen din.
Variabeloverstyringer må komme etter at funksjonene, variablene og blandingene våre er importert, men før resten av importene.
Her er et eksempel som endrer background-color
og color
for <body>
når du importerer og kompilerer Bootstrap via npm:
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Gjenta etter behov for en hvilken som helst variabel i Bootstrap, inkludert de globale alternativene nedenfor.
Kart og løkker
Bootstrap 4 inkluderer en håndfull Sass-kart, nøkkelverdipar som gjør det enklere å generere familier med relatert CSS. Vi bruker Sass-kart for våre farger, rutenettbrytepunkter og mer. Akkurat som Sass-variabler, inkluderer alle Sass-kart !default
flagget og kan overstyres og utvides.
Noen av våre Sass-kart er slått sammen til tomme kart som standard. Dette gjøres for å tillate enkel utvidelse av et gitt Sass-kart, men kommer på bekostning av å gjøre det litt vanskeligere å fjerne elementer fra et kart.
Endre kart
For å endre en eksisterende farge i $theme-colors
kartet vårt, legg til følgende i din egendefinerte Sass-fil:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Legg til kart
For å legge til en ny farge til $theme-colors
, legg til den nye nøkkelen og verdien:
$theme-colors: (
"custom-color": #900
);
Fjern fra kartet
For å fjerne farger fra $theme-colors
eller andre kart, bruk map-remove
. Vær oppmerksom på at du må sette den inn mellom våre krav og alternativer:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
Nødvendige nøkler
Bootstrap antar tilstedeværelsen av noen spesifikke nøkler i Sass-kart slik vi brukte og utvider disse selv. Når du tilpasser de inkluderte kartene, kan du støte på feil der nøkkelen til en bestemt Sass-kart brukes.
For eksempel bruker vi tastene primary
, success
, og danger
fra $theme-colors
for lenker, knapper og skjematilstander. Å erstatte verdiene til disse nøklene bør ikke by på problemer, men fjerning av dem kan føre til Sass-kompileringsproblemer. I disse tilfellene må du endre Sass-koden som bruker disse verdiene.
Funksjoner
Bootstrap bruker flere Sass-funksjoner, men bare et delsett er aktuelt for generell tematikk. Vi har inkludert tre funksjoner for å hente verdier fra fargekartene:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
Disse lar deg velge én farge fra et Sass-kart omtrent som hvordan du ville brukt en fargevariabel fra v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Vi har også en annen funksjon for å få et bestemt fargenivå fra $theme-colors
kartet. Negative nivåverdier vil gjøre fargen lysere, mens høyere nivåer blir mørkere.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
I praksis vil du kalle funksjonen og sende inn to parametere: navnet på fargen fra $theme-colors
(f.eks. primær eller fare) og et numerisk nivå.
.custom-element {
color: theme-color-level(primary, -10);
}
Ytterligere funksjoner kan legges til i fremtiden eller din egen tilpassede Sass for å lage nivåfunksjoner for flere Sass-kart, eller til og med en generisk en hvis du ønsker å være mer detaljert.
Fargekontrast
En tilleggsfunksjon vi inkluderer i Bootstrap er fargekontrastfunksjonen, color-yiq
. Den bruker YIQ-fargerommet til automatisk å returnere en lys ( #fff
) eller mørk ( #111
) kontrastfarge basert på den angitte grunnfargen. Denne funksjonen er spesielt nyttig for mixins eller looper der du genererer flere klasser.
For eksempel, for å generere fargeprøver fra $theme-colors
kartet vårt:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Den kan også brukes til engangskontrastbehov:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Du kan også spesifisere en grunnfarge med våre fargekartfunksjoner:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Unngå SVG
Vi bruker escape-svg
funksjonen for å unnslippe tegnene <
, >
og #
for SVG-bakgrunnsbilder. Disse tegnene må escapes for å gjengi bakgrunnsbildene riktig i IE. Ved bruk av escape-svg
funksjonen må data-URIer oppgis.
Legge til og trekke fra funksjoner
Vi bruker funksjonene add
og subtract
til å pakke inn CSS- calc
funksjonen. Hovedformålet med disse funksjonene er å unngå feil når en "enhetsløs" 0
verdi overføres til et calc
uttrykk. Uttrykk som calc(10px - 0)
vil returnere en feil i alle nettlesere, til tross for at de er matematisk korrekte.
Eksempel hvor beregningen er gyldig:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
Eksempel der beregningen er ugyldig:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
Sass alternativer
Tilpass Bootstrap 4 med vår innebygde egendefinerte variabelfil og bytt enkelt globale CSS-preferanser med nye $enable-*
Sass-variabler. Overstyr en variabels verdi og kompiler på nytt med npm run test
etter behov.
Du kan finne og tilpasse disse variablene for viktige globale alternativer i Bootstraps scss/_variables.scss
fil.
Variabel | Verdier | Beskrivelse |
---|---|---|
$spacer |
1rem (standard), eller en hvilken som helst verdi > 0 |
Angir standard avstandsverdi for å programmere generere avstandsverktøyene våre . |
$enable-rounded |
true (standard) ellerfalse |
Aktiverer forhåndsdefinerte border-radius stiler på ulike komponenter. |
$enable-shadows |
true eller false (standard) |
Aktiverer forhåndsdefinerte dekorative box-shadow stiler på ulike komponenter. Påvirker ikke box-shadow s som brukes for fokustilstander. |
$enable-gradients |
true eller false (standard) |
Aktiverer forhåndsdefinerte gradienter via background-image stiler på ulike komponenter. |
$enable-transitions |
true (standard) ellerfalse |
Aktiverer forhåndsdefinerte transition s på ulike komponenter. |
$enable-prefers-reduced-motion-media-query |
true (standard) ellerfalse |
Aktiverer prefers-reduced-motion mediespørringen , som undertrykker visse animasjoner/overganger basert på brukernes nettleser/operativsystempreferanser. |
$enable-hover-media-query |
true eller false (standard) |
Avviklet |
$enable-grid-classes |
true (standard) ellerfalse |
Aktiverer generering av CSS-klasser for nettsystemet (f.eks. .container , .row , .col-md-1 , osv.). |
$enable-caret |
true (standard) ellerfalse |
Aktiverer pseudoelement-caret på .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (standard) ellerfalse |
Legg til "hånd"-markør til ikke-deaktiverte knappeelementer. |
$enable-print-styles |
true (standard) ellerfalse |
Aktiverer stiler for å optimalisere utskrift. |
$enable-responsive-font-sizes |
true eller false (standard) |
Aktiverer responsive skriftstørrelser . |
$enable-validation-icons |
true (standard) ellerfalse |
Aktiverer background-image ikoner i tekstinndata og enkelte tilpassede skjemaer for valideringstilstander. |
$enable-deprecation-messages |
true (standard) ellerfalse |
Sett til false for å skjule advarsler når du bruker noen av de utdaterte blandingene og funksjonene som er planlagt å bli fjernet i v5 . |
Farge
Mange av Bootstraps ulike komponenter og verktøy er bygget gjennom en rekke farger definert i et Sass-kart. Dette kartet kan sløyfes i Sass for raskt å generere en rekke regelsett.
Alle farger
Alle farger tilgjengelig i Bootstrap 4, er tilgjengelige som Sass-variabler og et Sass-kart i scss/_variables.scss
fil. Dette vil bli utvidet i påfølgende mindre utgivelser for å legge til flere nyanser, omtrent som gråtonepaletten vi allerede inkluderer.
Slik kan du bruke disse i Sass:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Fargeverktøyklasser er også tilgjengelige for innstilling color
og background-color
.
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.
Grå
Et omfattende sett med grå variabler og et Sass-kart scss/_variables.scss
for konsekvente gråtoner på tvers av prosjektet. Legg merke til at disse er "kule grå", som har en tendens til en subtil blå tone, snarere enn nøytrale gråtoner.
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
) !default;
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.
Komponenter
Mange av Bootstraps komponenter og verktøy er bygget med @each
løkker som itererer over et Sass-kart. Dette er spesielt nyttig for å generere varianter av en komponent av vår $theme-colors
og lage responsive varianter for hvert bruddpunkt. Når du tilpasser disse Sass-kartene og kompilerer på nytt, vil du automatisk se endringene dine reflektert i disse loopene.
Modifikatorer
Mange av Bootstraps komponenter er bygget med en base-modifier klasse tilnærming. Dette betyr at hoveddelen av stilen er inneholdt i en basisklasse (f.eks. .btn
) mens stilvariasjoner er begrenset til modifikatorklasser (f.eks. .btn-danger
). Disse modifikatorklassene er bygget fra $theme-colors
kartet for å tilpasse antallet og navnet på modifikatorklassene våre.
Her er to eksempler på hvordan vi går over $theme-colors
kartet for å generere modifikatorer til .alert
komponenten og alle .bg-*
bakgrunnsverktøyene våre.
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}
Mottakelig
Disse Sass-løkkene er heller ikke begrenset til fargekart. Du kan også generere responsive varianter av komponentene eller verktøyene dine. Ta for eksempel våre responsive tekstjusteringsverktøy der vi blander en @each
løkke for $grid-breakpoints
Sass-kartet med en mediespørring.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}
Hvis du trenger å endre $grid-breakpoints
, vil endringene gjelde for alle løkkene som itererer over det kartet.
CSS-variabler
Bootstrap 4 inkluderer rundt to dusin egendefinerte CSS-egenskaper (variabler) i sin kompilerte CSS. Disse gir enkel tilgang til ofte brukte verdier som våre temafarger, bruddpunkter og primære skriftstabler når du arbeider i nettleserens Inspector, en kodesandkasse eller generell prototyping.
Tilgjengelige variabler
Her er variablene vi inkluderer (merk at det :root
er obligatorisk). De ligger i _root.scss
filen vår.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
Eksempler
CSS-variabler tilbyr lignende fleksibilitet som Sass sine variabler, men uten behov for kompilering før de blir servert til nettleseren. For eksempel, her tilbakestiller vi sidens font- og lenkestiler med CSS-variabler.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Knekkpunktvariabler
Selv om vi opprinnelig inkluderte bruddpunkter i CSS-variablene våre (f.eks. --breakpoint-md
), støttes ikke disse i mediespørringer , men de kan fortsatt brukes innenfor regelsett i mediespørringer. Disse bruddpunktvariablene forblir i den kompilerte CSS-en for bakoverkompatibilitet gitt at de kan brukes av JavaScript. Lær mer i spesifikasjonen .
Her er et eksempel på hva som ikke støttes:
@media (min-width: var(--breakpoint-sm)) {
...
}
Og her er et eksempel på hva som støttes:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}