Source

Theming Bootstrap

Tilpas Bootstrap 4 med vores nye indbyggede Sass-variabler til globale stilpræferencer for nemme temaer og komponentændringer.

Introduktion

I Bootstrap 3 var tematikken stort set drevet af variable tilsidesættelser i LESS, tilpasset CSS og et separat temastilark, som vi inkluderede i vores distfiler. Med en vis indsats kunne man fuldstændig redesigne udseendet af Bootstrap 3 uden at røre ved kernefilerne. Bootstrap 4 giver en velkendt, men lidt anderledes tilgang.

Nu udføres tematisering af Sass-variabler, Sass-kort og tilpasset CSS. Der er ikke mere dedikeret tema stylesheet; i stedet kan du aktivere det indbyggede tema for at tilføje gradienter, skygger og mere.

Sass

Brug vores Sass-kildefiler til at drage fordel af variabler, kort, mixins og mere.

Filstruktur

Når det er muligt, undgå at ændre Bootstraps kernefiler. For Sass betyder det at oprette dit eget stylesheet, der importerer Bootstrap, så du kan ændre og udvide det. Hvis du antager, at du bruger en pakkehåndtering som npm, vil du have en filstruktur, der ser sådan ud:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Hvis du har downloadet vores kildefiler og ikke bruger en pakkehåndtering, vil du manuelt konfigurere noget, der ligner den struktur, og holde Bootstraps kildefiler adskilt 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 muligheder: medtag hele Bootstrap, eller vælg de dele, du har brug for. Vi opfordrer til sidstnævnte, men vær opmærksom på, at der er nogle krav og afhængigheder på tværs af vores komponenter. Du skal også inkludere noget JavaScript til vores plugins.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@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 den opsætning på plads kan du begynde at ændre enhver af Sass-variablerne og -kortene i din custom.scss. Du kan også begynde at tilføje dele af Bootstrap under // Optionalsektionen efter behov. Vi foreslår, at du bruger den fulde importstak fra vores bootstrap.scssfil som dit udgangspunkt.

Variable standardindstillinger

Hver Sass-variabel i Bootstrap 4 inkluderer !defaultflaget, der giver dig mulighed for at tilsidesætte variablens standardværdi i din egen Sass uden at ændre Bootstraps kildekode. Kopier og indsæt variabler efter behov, rediger deres værdier, og fjern !defaultflaget. Hvis en variabel allerede er blevet tildelt, vil den ikke blive gentildelt af standardværdierne i Bootstrap.

Du finder den komplette liste over Bootstraps variabler i scss/_variables.scss.

Variabeltilsidesættelser inden for den samme Sass-fil kan komme før eller efter standardvariablerne. Men når du tilsidesætter på tværs af Sass-filer, skal dine tilsidesættelser komme, før du importerer Bootstraps Sass-filer.

Her er et eksempel, der ændrer background-colorog colorfor, <body>når du importerer og kompilerer Bootstrap via npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Gentag efter behov for enhver variabel i Bootstrap, inklusive de globale muligheder nedenfor.

Kort og sløjfer

Bootstrap 4 inkluderer en håndfuld Sass-kort, nøgleværdipar, der gør det nemmere at generere familier af relateret CSS. Vi bruger Sass-kort til vores farver, gitterbrudpunkter og mere. Ligesom Sass-variabler inkluderer alle Sass-kort !defaultflaget og kan tilsidesættes og udvides.

Nogle af vores Sass-kort er som standard flettet sammen til tomme kort. Dette gøres for at tillade let udvidelse af et givet Sass-kort, men det kommer på bekostning af at gøre det lidt vanskeligere at fjerne elementer fra et kort.

Rediger kort

For at ændre en eksisterende farve på vores $theme-colorskort skal du tilføje følgende til din tilpassede Sass-fil:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Tilføj til kort

For at tilføje en ny farve til $theme-colorsskal du tilføje den nye nøgle og værdi:

$theme-colors: (
  "custom-color": #900
);

Fjern fra kortet

For at fjerne farver fra $theme-colorseller et hvilket som helst andet kort, brug map-remove. Vær opmærksom på, at du skal indsætte det mellem vores krav og muligheder:

// 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øgler

Bootstrap antager tilstedeværelsen af nogle specifikke nøgler i Sass-kort, da vi brugte og udvider disse selv. Når du tilpasser de inkluderede kort, kan du støde på fejl, hvor en specifik Sass-kortnøgle bliver brugt.

For eksempel bruger vi tasterne primary, success, og dangerfra $theme-colorstil links, knapper og formulartilstande. Udskiftning af værdierne for disse nøgler burde ikke give nogen problemer, men fjernelse af dem kan forårsage problemer med Sass-kompilering. I disse tilfælde skal du ændre den Sass-kode, der gør brug af disse værdier.

Funktioner

Bootstrap bruger adskillige Sass-funktioner, men kun en delmængde kan anvendes til generelle temaer. Vi har inkluderet tre funktioner til at hente værdier fra farvekortene:

@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 giver dig mulighed for at vælge én farve fra et Sass-kort, ligesom du ville bruge en farvevariabel fra v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Vi har også en anden funktion til at få et bestemt farveniveau fra $theme-colorskortet. Negative niveauværdier vil gøre farven lysere, mens højere niveauer bliver 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 ville du kalde funktionen og sende to parametre ind: navnet på farven fra $theme-colors(f.eks. primær eller fare) og et numerisk niveau.

.custom-element {
  color: theme-color-level(primary, -10);
}

Yderligere funktioner kan tilføjes i fremtiden eller din egen tilpassede Sass for at skabe niveaufunktioner til yderligere Sass-kort, eller endda en generisk, hvis du ville være mere udførlig.

Farvekontrast

En ekstra funktion, vi inkluderer i Bootstrap, er farvekontrastfunktionen, color-yiq. Den bruger YIQ-farverummet til automatisk at returnere en lys ( #fff) eller mørk ( #111) kontrastfarve baseret på den angivne grundfarve. Denne funktion er især nyttig til mixins eller loops, hvor du genererer flere klasser.

For eksempel, for at generere farveprøver fra vores $theme-colorskort:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Den kan også bruges til engangskontrastbehov:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Du kan også angive en grundfarve med vores farvekortfunktioner:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Sass muligheder

Tilpas Bootstrap 4 med vores indbyggede tilpassede variabelfil, og skift nemt globale CSS-præferencer med nye $enable-*Sass-variabler. Tilsidesæt en variabels værdi, og kompiler igen med npm run testefter behov.

Du kan finde og tilpasse disse variabler til vigtige globale muligheder i Bootstraps scss/_variables.scssfil.

Variabel	Værdier	Beskrivelse
`$spacer`	`1rem`(standard) eller en hvilken som helst værdi > 0	Angiver standardafstandsværdien til programmæssig generering af vores spacerværktøjer .
`$enable-rounded`	`true`(standard) eller`false`	Aktiverer foruddefinerede `border-radius`stilarter på forskellige komponenter.
`$enable-shadows`	`true`eller `false`(standard)	Aktiverer foruddefinerede `box-shadow`stilarter på forskellige komponenter.
`$enable-gradients`	`true`eller `false`(standard)	Aktiverer foruddefinerede gradienter via `background-image`stilarter på forskellige komponenter.
`$enable-transitions`	`true`(standard) eller`false`	Aktiverer foruddefinerede `transition`s på forskellige komponenter.
`$enable-hover-media-query`	`true`eller `false`(standard)	Forældet
`$enable-grid-classes`	`true`(standard) eller`false`	Aktiverer generering af CSS-klasser til netsystemet (f.eks. `.container`, `.row`, `.col-md-1`, osv.).
`$enable-caret`	`true`(standard) eller`false`	Aktiverer pseudo element caret på `.dropdown-toggle`.
`$enable-print-styles`	`true`(standard) eller`false`	Aktiverer stilarter til optimering af udskrivning.

Farve

Mange af Bootstraps forskellige komponenter og hjælpeprogrammer er bygget gennem en række farver defineret i et Sass-kort. Dette kort kan løkkes i Sass for hurtigt at generere en række regelsæt.

Alle farver

Alle farver, der er tilgængelige i Bootstrap 4, er tilgængelige som Sass-variabler og et Sass-kort i scss/_variables.scssfil. Dette vil blive udvidet i efterfølgende mindre udgivelser for at tilføje yderligere nuancer, ligesom den gråtonepalet , vi allerede inkluderer.

Blå

Indigo

Lilla

Lyserød

Rød

orange

Gul

Grøn

Blågrøn

Cyan

Sådan kan du bruge disse i din Sass:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Farvefunktionsklasser er også tilgængelige for indstilling colorog background-color.

I fremtiden vil vi tilstræbe at levere Sass-kort og variabler for nuancer af hver farve, som vi har gjort med gråtonefarverne nedenfor.

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's scss/_variables.scssfil.

Primær

Sekundær

Succes

Fare

Advarsel

Info

Lys

Mørk

Grå

Et ekspansivt sæt af grå variable og et Sass-kort scss/_variables.scsstil ensartede gråtoner på tværs af dit projekt.

100

200

300

400

500

600

700

800

900

Indenfor scss/_variables.scssfinder du Bootstraps farvevariabler og Sass-kort. Her er et eksempel på $colorsSass-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
) !default;

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 stræbe efter at forbedre dette. Indtil da, planlæg at gøre brug af ${color}variablerne og dette Sass-kort.

Komponenter

Mange af Bootstraps komponenter og hjælpeprogrammer er bygget med @eachloops, der itererer over et Sass-kort. Dette er især nyttigt til at generere varianter af en komponent af vores $theme-colorsog 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.

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-colorskortet for at tilpasse antallet og navnet på vores modifikatorklasser.

Her er to eksempler på, hvordan vi looper over $theme-colorskortet for at generere modifikatorer til .alertkomponenten og alle vores .bg-*baggrundsværktøjer.

// 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);
}

Lydhør

Disse Sass-loops er heller ikke begrænset til farvekort. Du kan også generere responsive variationer af dine komponenter eller hjælpeprogrammer. Tag for eksempel vores responsive tekstjusteringsværktøjer, hvor vi blander en @eachloop til $grid-breakpointsSass-kortet med en medieforespørgsel.

@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 har brug for at ændre din $grid-breakpoints, vil dine ændringer gælde for alle de loops, der itererer over det pågældende kort.

CSS variabler

Bootstrap 4 inkluderer omkring to dusin brugerdefinerede CSS-egenskaber (variabler) i dens kompilerede CSS. Disse giver nem adgang til almindeligt anvendte værdier som vores temafarver, brudpunkter og primære skrifttyper, når du arbejder i din browsers Inspector, en kodesandkasse eller generel prototyping.

Tilgængelige variabler

Her er de variabler, vi inkluderer (bemærk, at det :rooter påkrævet). De er placeret i vores _root.scssfil.

: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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Eksempler

CSS-variabler giver samme fleksibilitet som Sass' variabler, men uden behov for kompilering, før de serveres til browseren. For eksempel nulstiller vi vores sides skrifttype og linkstile med CSS-variabler.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Breakpoint variabler

Selvom vi oprindeligt inkluderede brudpunkter i vores CSS-variabler (f.eks. --breakpoint-md), understøttes disse ikke i medieforespørgsler , men de kan stadig bruges inden for regelsæt i medieforespørgsler. Disse brudpunktvariabler forbliver i den kompilerede CSS for bagudkompatibilitet, da de kan bruges af JavaScript. Lær mere i specifikationerne.

Her er et eksempel på, hvad der ikke understøttes:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Og her er et eksempel på, hvad der understøttes:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}