in English

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 distfilene 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.scssvil 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 // Optionalseksjonen etter behov. Vi foreslår at du bruker hele importstabelen fra bootstrap.scssfilen vår som utgangspunkt.

Variable standardinnstillinger

Hver Sass-variabel i Bootstrap inkluderer !defaultflagget 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 !defaultflagget. 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-colorog colorfor <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.

Kom i gang med Bootstrap via npm med vårt startprosjekt! Gå til twbs/bootstrap-npm-starter-mallageret for å se hvordan du bygger og tilpasser Bootstrap i ditt eget npm-prosjekt. Inkluderer Sass-kompilator, Autoprefixer, Stylelint, PurgeCSS og Bootstrap-ikoner.

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 !defaultflagget 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-colorskartet 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-colorseller 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 dangerfra $theme-colorsfor 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-colorskartet. 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-colorskartet 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-svgfunksjonen for å unnslippe tegnene <, >og #for SVG-bakgrunnsbilder. Disse tegnene må escapes for å gjengi bakgrunnsbildene riktig i IE. Ved bruk av escape-svgfunksjonen må data-URIer oppgis.

Legge til og trekke fra funksjoner

Vi bruker funksjonene addog subtracttil å pakke inn CSS- calcfunksjonen. Hovedformålet med disse funksjonene er å unngå feil når en "enhetsløs" 0verdi overføres til et calcuttrykk. 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 testetter behov.

Du kan finne og tilpasse disse variablene for viktige globale alternativer i Bootstraps scss/_variables.scssfil.

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-radiusstiler på ulike komponenter.
$enable-shadows trueeller false(standard) Aktiverer forhåndsdefinerte dekorative box-shadowstiler på ulike komponenter. Påvirker ikke box-shadows som brukes for fokustilstander.
$enable-gradients trueeller false(standard) Aktiverer forhåndsdefinerte gradienter via background-imagestiler på ulike komponenter.
$enable-transitions true(standard) ellerfalse Aktiverer forhåndsdefinerte transitions på ulike komponenter.
$enable-prefers-reduced-motion-media-query true(standard) ellerfalse Aktiverer prefers-reduced-motionmediespørringen , som undertrykker visse animasjoner/overganger basert på brukernes nettleser/operativsystempreferanser.
$enable-hover-media-query trueeller 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 trueeller false(standard) Aktiverer responsive skriftstørrelser .
$enable-validation-icons true(standard) ellerfalse Aktiverer background-imageikoner i tekstinndata og enkelte tilpassede skjemaer for valideringstilstander.
$enable-deprecation-messages true(standard) ellerfalse Sett til falsefor å 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.scssfil. Dette vil bli utvidet i påfølgende mindre utgivelser for å legge til flere nyanser, omtrent som gråtonepaletten vi allerede inkluderer.

$blå #007bff
$indigo #6610f2
$lilla #6f42c1
$rosa #e83e8c
$rød #dc3545
$oransje #fd7e14
$gul #ffc107
$grønn #28a745
$blågrønn #20c997
$cyan #17a2b8

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 colorog background-color.

I fremtiden vil vi ta sikte på å tilby Sass-kart og variabler for nyanser av hver farge, slik vi har gjort med gråtonefargene nedenfor.

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.scssfil.

$primær #007bff
$sekundær #6c757d
$suksess #28a745
$fare #dc3545
$advarsel #ffc107
$info #17a2b8
$lys #f8f9fa
$mørk #343a40

Grå

Et omfattende sett med grå variabler og et Sass-kart scss/_variables.scssfor 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.

$grå-100 #f8f9fa
$grå-200 #e9ecef
$grå-300 #dee2e6
$grå-400 #ced4da
$grå-500 #adb5bd
$grå-600 #6c757d
$grå-700 #495057
$grå-800 #343a40
$grå-900 #212529

Innenfor scss/_variables.scssfinner du Bootstraps fargevariabler og Sass-kart. Her er et eksempel på $colorsSass-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 @eachløkker som itererer over et Sass-kart. Dette er spesielt nyttig for å generere varianter av en komponent av vår $theme-colorsog 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-colorskartet for å tilpasse antallet og navnet på modifikatorklassene våre.

Her er to eksempler på hvordan vi går over $theme-colorskartet for å generere modifikatorer til .alertkomponenten 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 @eachløkke for $grid-breakpointsSass-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 :rooter obligatorisk). De ligger i _root.scssfilen 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);
  }
}