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. I vores build har vi øget Sass-afrundingspræcisionen til 6 (som standard er den 5) for at forhindre problemer med browserafrunding.

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 opsætte 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.scss, vil 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 en hvilken som helst 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. Nogle variabler er indstillet til null, disse variabler udsender ikke egenskaben, medmindre de er tilsidesat i din konfiguration.

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 koster det 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 er anvendelig til generelle temaer. Vi har inkluderet tre funktioner til at få 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`
}

Undslip SVG

Vi bruger escape-svgfunktionen til at undslippe tegnene <, >og #til SVG-baggrundsbilleder. Disse tegn skal escapes for korrekt at gengive baggrundsbillederne i IE.

Tilføj og subtraher funktioner

Vi bruger funktionerne addog subtracttil at ombryde CSS- calcfunktionen. Det primære formål med disse funktioner er at undgå fejl, når en "enhedsløs" 0værdi overføres til et calcudtryk. Udtryk som calc(10px - 0)vil returnere en fejl i alle browsere, selvom 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 hvor 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 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	Specificerer 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-prefers-reduced-motion-media-query`	`true`(standard) eller`false`	Aktiverer `prefers-reduced-motion`medieforespørgslen , som undertrykker visse animationer/overgange baseret på brugernes browser-/operativsystempræferencer.
`$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-pointer-cursor-for-buttons`	`true`(standard) eller`false`	Tilføj "hånd"-markør til ikke-deaktiverede knapelementer.
`$enable-print-styles`	`true`(standard) eller`false`	Aktiverer stilarter til optimering af udskrivning.
`$enable-responsive-font-sizes`	`true`eller `false`(standard)	Aktiverer responsive skriftstørrelser .
`$enable-validation-icons`	`true`(standard) eller`false`	Aktiverer `background-image`ikoner i tekstinput og nogle brugerdefinerede formularer til valideringstilstande.
`$enable-deprecation-messages`	`true`eller `false`(standard)	Indstil til `true`for at vise advarsler, når du bruger nogen af de forældede mixins og funktioner, der er planlagt til at blive fjernet i `v5`.

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

Primær

Sekundær

Succes

Fare

Advarsel

Info

Lys

Mørk

Grå

Et omfattende sæt af grå variabler og et Sass-kort scss/_variables.scsstil ensartede gråtoner på tværs af dit projekt. Bemærk, at disse er "seje grå", som har en tendens til en subtil blå tone, snarere end neutrale gråtoner.

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 bestræbe sig på 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 omkompilerer, 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, "Noto 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 tilbyder 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);
}

Knækpunktvariabler

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