Theming Bootstrap

Personnaliséiert Bootstrap 4 mat eisen neien agebaute Sass Variablen fir global Stilvirléiften fir einfach Themen a Komponentännerungen.

Aféierung

Am Bootstrap 3 gouf d'Thema gréisstendeels duerch variabel Iwwerschreiden a LESS gedriwwen, personaliséiert CSS, an e getrennten Thema Stylesheet, dee mir an eise distDateien abegraff hunn. Mat e bëssen Effort konnt een de Look vum Bootstrap 3 komplett nei designen ouni d'Kärdateien ze beréieren. Bootstrap 4 bitt eng vertraute, awer liicht aner Approche.

Elo gëtt Themen duerch Sass Variablen, Sass Kaarten a personaliséiert CSS erreecht. Et gëtt kee méi engagéierten Thema Stylesheet; amplaz, Dir kënnt d'gebaut-an Thema aktivéieren Gradienten, Shadows, a méi.

Sass

Benotzt eis Quell Sass Dateien fir Variabelen, Kaarten, Mixins a méi ze profitéieren.

Datei Struktur

Wann ëmmer méiglech, vermeit d'Bootstrap Kärdateien z'änneren. Fir Sass heescht dat Ären eegene Stylesheet ze kreéieren deen Bootstrap importéiert fir datt Dir se änneren an verlängeren kënnt. Unzehuelen datt Dir e Package Manager wéi npm benotzt, hutt Dir eng Dateistruktur déi esou ausgesäit:

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

Wann Dir eis Quelldateien erofgelueden hutt an net e Package Manager benotzt, wëllt Dir manuell eppes ähnlech wéi déi Struktur opbauen, d'Bootstrap Quelldateien getrennt vun Ärem eegenen halen.

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

Importéieren

An Ärem custom.scss, importéiert Dir Bootstrap Quell Sass Dateien. Dir hutt zwou Méiglechkeeten: enthält all Bootstrap, oder wielt déi Deeler déi Dir braucht. Mir encouragéieren déi lescht, awer bewosst datt et e puer Ufuerderungen an Ofhängegkeeten iwwer eise Komponenten sinn. Dir musst och e puer JavaScript fir eis Plugins enthalen.

// 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";

Mat deem Setup op der Plaz kënnt Dir ufänken eng vun de Sass Variablen a Kaarten an Ärem custom.scss. Dir kënnt och ufänken Deeler vum Bootstrap ënner der // OptionalRubrik ze addéieren wéi néideg. Mir proposéieren de komplette Importstack aus eiser bootstrap.scssDatei als Äre Startpunkt ze benotzen.

Variabel Defaults

All Sass Variabel am Bootstrap 4 enthält de !defaultFändel deen Iech erlaabt de Standardwäert vun der Variabel an Ärem eegene Sass ze iwwerschreiden ouni de Bootstrap säi Quellcode z'änneren. Kopie a Paste Variablen wéi néideg, änneren hir Wäerter, an ewechzehuelen de !defaultFändel. Wann eng Variabel scho zougewisen ass, da gëtt se net vun de Standardwäerter am Bootstrap nei zougewisen.

Dir fannt déi komplett Lëscht vu Bootstrap Variabelen an scss/_variables.scss.

Variabel Iwwerschreiden bannent der selwechter Sass Datei kënne virun oder no de Standardvariablen kommen. Wéi och ëmmer, wann Dir iwwer Sass Dateien iwwerschreift, musst Dir Är Iwwerschrëfte kommen ier Dir Bootstrap Sass Dateien importéiert.

Hei ass e Beispill dat ännert background-colora colorfir d' <body>Importéieren an d'Kompilatioun vun Bootstrap iwwer npm:

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

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

Widderhuelen wéi néideg fir all Variabel am Bootstrap, och déi global Optiounen hei drënner.

Kaarten a Schleifen

Bootstrap 4 enthält eng Handvoll Sass Kaarten, Schlësselwäertpaaren, déi et méi einfach maachen Famillen vu verwandte CSS ze generéieren. Mir benotzen Sass Kaarten fir eis Faarwen, Gitterbriechpunkten a méi. Just wéi Sass Verännerlechen, all Sass Kaarten enthalen de !defaultFändel a kënnen iwwerschratt a verlängert ginn.

E puer vun eise Sass Kaarten ginn als Standard an eidel fusionéiert. Dëst gëtt gemaach fir eng einfach Expansioun vun enger bestëmmter Sass Kaart z'erméiglechen, awer kënnt op d'Käschte fir Elementer vun enger Kaart e bësse méi schwéier ze läschen .

Kaart änneren

Fir eng existent Faarf op eiser $theme-colorsKaart z'änneren, füügt déi folgend op Är personaliséiert Sass Datei:

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

Füügt op d'Kaart

Fir eng nei Faarf ze $theme-colorsaddéieren, füügt den neie Schlëssel a Wäert derbäi:

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

Ewechzehuelen vun der Kaart

Fir Faarwen aus $theme-colors, oder all aner Kaart ze läschen, benotzt map-remove. Sidd bewosst datt Dir et tëscht eisen Ufuerderungen an Optiounen asetzen musst:

// 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éideg Schlësselen

Bootstrap iwwerhëlt d'Präsenz vun e puer spezifesche Schlësselen bannent Sass Kaarten wéi mir dës selwer benotzt hunn a verlängeren. Wéi Dir déi abegraff Kaarten personaliséiere kënnt, kënnt Dir Feeler begéinen wou e spezifesche Sass Kaart säi Schlëssel benotzt gëtt.

Zum Beispill benotze mir d' primary, success, a dangerSchlësselen aus $theme-colorsfir Linken, Knäppercher a Form Staaten. D'Wäerter vun dëse Schlësselen ersetzen sollt keng Probleemer presentéieren, awer d'Ewechhuele vun hinnen kann Sass Kompiléierungsprobleemer verursaachen. An dëse Fäll musst Dir de Sass Code änneren, deen dës Wäerter benotzt.

Fonctiounen

Bootstrap benotzt verschidde Sass Funktiounen, awer nëmmen e Subset ass applicabel fir allgemeng Themen. Mir hunn dräi Funktiounen abegraff fir Wäerter aus de Faarfkaarten ze kréien:

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

Dës erlaben Iech eng Faarf aus enger Sass Kaart ze wielen sou wéi Dir eng Faarfvariabel vu v3 benotzt.

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

Mir hunn och eng aner Funktioun fir e bestëmmte Faarfniveau vun der $theme-colorsKaart ze kréien. Negativ Niveau Wäerter wäerten d'Faarf hell maachen, während méi héich Niveauen däischter ginn.

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

An der Praxis, géift Dir d'Funktioun ruffen an zwee Parameteren passéieren: den Numm vun der Faarf aus $theme-colors(zB Primär oder Gefor) an en numeresche Niveau.

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

Zousätzlech Funktiounen kéinten an Zukunft bäigefüügt ginn oder Ären eegene Sass fir Niveaufunktiounen fir zousätzlech Sass Kaarten ze kreéieren, oder souguer eng generesch wann Dir méi verbose wëllt sinn.

Faarf Kontrast

Eng zousätzlech Funktioun déi mir am Bootstrap enthalen ass d'Faarfkontrastfunktioun color-yiq,. Et benotzt den YIQ Faarfraum fir automatesch eng hell ( #fff) oder donkel ( #111) Kontrastfaarf op Basis vun der spezifizéierter Basisfaarf zréckzekommen. Dës Funktioun ass besonnesch nëtzlech fir Mixins oder Loops wou Dir verschidde Klassen generéiert.

Zum Beispill, fir Faarfswatches vun eiser $theme-colorsKaart ze generéieren:

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

Et kann och fir eenzel Kontrastbedürfnisser benotzt ginn:

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

Dir kënnt och eng Basisfaarf mat eise Faarfkaartfunktiounen uginn:

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

Sass Optiounen

Personnaliséiert Bootstrap 4 mat eiser agebauter personaliséierter Variabeldatei a wiesselt einfach global CSS Virléiften mat neie $enable-*Sass Variablen. Iwwerschreift de Wäert vun enger Variabel a kompiléiert mat npm run testwéi néideg.

Dir kënnt dës Variablen fir Schlëssel global Optiounen an der Bootstrap scss/_variables.scssDatei fannen a personaliséieren.

Variabel	Wäerter	Beschreiwung
`$spacer`	`1rem`(Standard), oder all Wäert > 0	Spezifizéiert de Standard Spacer Wäert fir programmatesch eis Spacer Utilities ze generéieren .
`$enable-rounded`	`true`(Standard) oder`false`	Aktivéiert virdefinéiert `border-radius`Stiler op verschidde Komponenten.
`$enable-shadows`	`true`oder `false`(Standard)	Aktivéiert virdefinéiert `box-shadow`Stiler op verschidde Komponenten.
`$enable-gradients`	`true`oder `false`(Standard)	Aktivéiert virdefinéiert Gradienten iwwer `background-image`Stiler op verschiddene Komponenten.
`$enable-transitions`	`true`(Standard) oder`false`	Aktivéiert virdefinéiert `transition`s op verschidde Komponenten.
`$enable-hover-media-query`	`true`oder `false`(Standard)	Deprecéiert
`$enable-grid-classes`	`true`(Standard) oder`false`	Aktivéiert d'Generatioun vun CSS Klassen fir de Gittersystem (zB, `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(Standard) oder`false`	Aktivéiert Pseudo Element Caret op `.dropdown-toggle`.
`$enable-print-styles`	`true`(Standard) oder`false`	Erméiglecht Stiler fir Dréckerei ze optimiséieren.

Faarf

Vill vun Bootstrap verschidde Komponenten an Utilities ginn duerch eng Serie vu Faarwen gebaut, déi an enger Sass Kaart definéiert sinn. Dës Kaart kann an Sass iwwerschratt ginn fir séier eng Serie vu Regelen ze generéieren.

All Faarwen

All Faarwen verfügbar am Bootstrap 4, sinn als Sass Variablen an eng Sass Kaart an der scss/_variables.scssDatei verfügbar. Dëst gëtt a spéider kleng Verëffentlechungen erweidert fir zousätzlech Nuancen ze addéieren, sou wéi d' Grauskala Palette déi mir scho enthalen.

Blo

Indigo

Mov

Rosa

Rout

Orange

Giel

Gréng

Teal

Cyan

Hei ass wéi Dir dës an Ärem Sass benotze kënnt:

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

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

Faarf Utility Klassen sinn och verfügbar fir Astellung coloran background-color.

An Zukunft wäerte mir d'Ziel Sass Kaarten a Variablen fir Schatten vun all Faarf ubidden wéi mir mat de Grauskala Faarwen hei ënnen gemaach hunn.

Thema Faarwen

Mir benotzen en Ënnerdeel vun alle Faarwen fir eng méi kleng Faarfpalette ze kreéieren fir Faarfschemaen ze generéieren, och verfügbar als Sass Variablen an eng Sass Kaart an der Bootstraps scss/_variables.scssDatei.

Primär

Secondaire

Erfolleg

Gefor

Warnung

Info

Liicht

Däischter

Grays

En erweiderten Set vu groe Variabelen an eng Sass Kaart scss/_variables.scssfir konsequent Schatten vu gro iwwer Äre Projet.

100

200

300

400

500

600

700

800

900

Bannen scss/_variables.scssfannt Dir Bootstrap Faarfvariablen a Sass Kaart. Hei ass e Beispill vun der $colorsSass Kaart:

$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;

Füügt, läscht oder ännert Wäerter bannent der Kaart fir ze aktualiséieren wéi se a villen anere Komponenten benotzt ginn. Leider zu dëser Zäit benotzt net all Komponent dës Sass Kaart. Zukünfteg Updates wäerte probéieren dëst ze verbesseren. Bis dohin, plangt d' ${color}Verännerlechen an dës Sass Kaart ze benotzen.

Komponenten

Vill vun Bootstrap Komponenten an Utilities si mat @eachSchleifen gebaut déi iwwer eng Sass Kaart iteréieren. Dëst ass besonnesch hëllefräich fir Varianten vun engem Komponent vun eisem ze generéieren $theme-colorsan reaktiounsfäeger Varianten fir all Breakpoint ze kreéieren. Wéi Dir dës Sass Kaarten personaliséiert an nei kompiléiert, gesitt Dir automatesch Är Ännerungen an dëse Loops reflektéiert.

Modifiers

Vill vun Bootstrap Komponente si mat enger Basis-Modifier Klass Approche gebaut. Dëst bedeit datt de gréissten Deel vum Styling zu enger Basisklass enthale gëtt (zB, .btn) wärend Stilvariatioune limitéiert sinn op Modifizéierungsklassen (zB. .btn-danger). Dës Modifizéierungsklassen sinn aus der $theme-colorsKaart gebaut fir d'Zuel an den Numm vun eise Modifikatiounsklassen ze personaliséieren.

Hei sinn zwee Beispiller vu wéi mir iwwer d' $theme-colorsKaart schleifen fir Modifikateure fir d' .alertKomponent an all eis .bg-*Background Utilities ze generéieren.

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

Reaktiounsfäeger

Dës Sass Loops sinn och net limitéiert op Faarfkaarten. Dir kënnt och reaktiounsfäeger Variatiounen vun Äre Komponenten oder Utilities generéieren. Huelt zum Beispill eis reaktiounsfäeger Text Ausrichtung Utilities wou mir eng @eachLoop fir d' $grid-breakpointsSass Kaart mat enger Medienufro vermëschen.

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

Sollt Dir Är Ännerunge musse änneren $grid-breakpoints, gëllen Är Ännerungen op all d'Schleifen, déi iwwer dës Kaart iteréieren.

CSS Variablen

Bootstrap 4 enthält ongeféier zwee Dutzend CSS personaliséiert Eegeschaften (Variablen) a senger kompiléierter CSS. Dës bidden en einfachen Zougang zu allgemeng benotzte Wäerter wéi eis Themefaarwen, Breakpunkten, a primär Schrëftstacks wann Dir an Ärem Browser Inspector, enger Code Sandbox oder allgemeng Prototyping schafft.

Verfügbar Variabelen

Hei sinn d'Variabelen déi mir enthalen (Notiz datt de :rooterfuerderlech ass). Si sinn an eisem _root.scssDossier.

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

Beispiller

CSS Variablen bidden ähnlech Flexibilitéit wéi Sass Variablen, awer ouni de Besoin fir Kompiléierung ier se an de Browser servéiert ginn. Zum Beispill, hei setzen mir d'Schrëft vun eiser Säit zréck a Linkstiler mat CSS Variablen.

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

Breakpoint Verännerlechen

Wärend mir ursprénglech Breakpoints an eise CSS Variablen abegraff hunn (zB, --breakpoint-md), dës ginn net a Medienufroen ënnerstëtzt , awer se kënnen nach ëmmer bannent Regelsets a Medienufroen benotzt ginn. Dës Breakpunktvariablen bleiwen an der kompiléierter CSS fir Réckkompatibilitéit, well se kënne vu JavaScript benotzt ginn. Léiert méi an der Spezifizéierung.

Hei ass e Beispill vu wat net ënnerstëtzt gëtt:

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

An hei ass e Beispill vu wat ënnerstëtzt gëtt:

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