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 dist
Dateien 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 de 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 wann Dir Sass kompiléiert mat Ärer eegener Asset Pipeline.
Datei Struktur
Wann ëmmer méiglech, vermeit d'Kärdateien vum Bootstrap z'änneren. Fir Sass heescht dat Äert eegent Stylesheet ze kreéieren deen Bootstrap importéiert fir datt Dir se änneren an ausdehnen. 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
// 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";
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 // Optional
Rubrik ze addéieren wéi néideg. Mir proposéieren de komplette Importstack aus eiser bootstrap.scss
Datei als Äre Startpunkt ze benotzen.
Variabel Defaults
All Sass Variabel am Bootstrap enthält de !default
Fä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 Variabelen wéi néideg, änneren hir Wäerter, an ewechzehuelen de !default
Fä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 Variablen an scss/_variables.scss
. E puer Variablen sinn op gesat null
, dës Variablen ginn d'Eegeschaft net eraus ausser se sinn an Ärer Konfiguratioun iwwerschratt.
Variabel Iwwerschreiden musse kommen nodeems eis Funktiounen, Variabelen a Mixins importéiert ginn, awer virum Rescht vun den Importer.
Hei ass e Beispill dat den background-color
a color
fir den ännert <body>
wann Dir Bootstrap iwwer npm importéiert a kompiléiert:
@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
Widderhuelen wéi néideg fir all Variabel am Bootstrap, dorënner 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 benotze Sass Kaarten fir eis Faarwen, Gitterbriechpunkten a méi. Just wéi Sass Verännerlechen, all Sass Kaarten enthalen de !default
Fändel a kann iwwerdribblen an 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 d' Ewechhuele vun Elementer vun enger Kaart liicht méi schwéier ze maachen.
Kaart änneren
Fir eng existent Faarf op eiser $theme-colors
Kaart z'änneren, füügt déi folgend op Är personaliséiert Sass Datei:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Foto op Kaart
Fir eng nei Faarf ze $theme-colors
addé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 danger
Schlësselen aus $theme-colors
fir 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 uwendbar 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-colors
Kaart 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 personaliséierte 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-colors
Kaart 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`
}
Flucht SVG
Mir benotzen d' escape-svg
Funktioun fir ze entkommen <
, >
a #
Charaktere fir SVG Hannergrondbiller. Dës Charaktere musse entkomm sinn fir d'Hannergrondbilder an IE richteg ze maachen. Wann Dir d' escape-svg
Funktioun benotzt, mussen Daten URIs zitéiert ginn.
Fonctiounen addéieren an subtrahéieren
Mir benotzen d' Funktiounen add
a subtract
fir d'CSS calc
Funktioun ze wéckelen. De primäre Zweck vun dëse Funktiounen ass Feeler ze vermeiden wann e "Eenheetlosen" 0
Wäert an en calc
Ausdrock passéiert ass. Ausdréck wéi calc(10px - 0)
wäerten e Feeler an all Browser zréckginn, obwuel se mathematesch korrekt sinn.
Beispill wou de Calc gëlteg ass:
$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);
}
Beispill wou de Calc ongëlteg ass:
$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 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 test
wéi néideg.
Dir kënnt dës Variablen fir Schlëssel global Optiounen an der Bootstrap scss/_variables.scss
Datei fannen a personaliséieren.
Variabel | Wäerter | Beschreiwung |
---|---|---|
$spacer |
1rem (Standard), oder all Wäert > 0 |
Spezifizéiert den Default Spacer Wäert fir programmatesch eis Spacer Utilities ze generéieren . |
$enable-rounded |
true (Standard) oderfalse |
Aktivéiert virdefinéiert border-radius Stiler op verschidde Komponenten. |
$enable-shadows |
true oder false (Standard) |
Erméiglecht virdefinéiert dekorative box-shadow Stiler op verschidde Komponenten. Beaflosst net box-shadow s benotzt fir Fokusstaaten. |
$enable-gradients |
true oder false (Standard) |
Aktivéiert virdefinéiert Gradienten iwwer background-image Stiler op verschiddene Komponenten. |
$enable-transitions |
true (Standard) oderfalse |
Aktivéiert virdefinéiert transition s op verschidde Komponenten. |
$enable-prefers-reduced-motion-media-query |
true (Standard) oderfalse |
Aktivéiert d' prefers-reduced-motion Medienquery , déi verschidden Animatiounen/Iwwergäng ënnerdréckt baséiert op de Browser-/Betriebssystemvirstellungen vun de Benotzer. |
$enable-hover-media-query |
true oder false (Standard) |
Deprecéiert |
$enable-grid-classes |
true (Standard) oderfalse |
Aktivéiert d'Generatioun vun CSS Klassen fir de Gittersystem (zB, .container , .row , .col-md-1 , etc.). |
$enable-caret |
true (Standard) oderfalse |
Aktivéiert Pseudo Element Caret op .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (Standard) oderfalse |
Füügt "Hand" Cursor un net-behënnert Knäppchen Elementer. |
$enable-print-styles |
true (Standard) oderfalse |
Erlaabt Stiler fir den Drock ze optimiséieren. |
$enable-responsive-font-sizes |
true oder false (Standard) |
Aktivéiert reaktiounsfäeger Schrëftgréissten . |
$enable-validation-icons |
true (Standard) oderfalse |
Aktivéiert background-image Ikonen bannent textuellen Inputen an e puer personaliséiert Forme fir Validatiounsstaaten. |
$enable-deprecation-messages |
true (Standard) oderfalse |
Setzt op false fir Warnungen ze verstoppen wann Dir eng vun den ofgeschniddene Mixins a Funktiounen benotzt, déi geplangt sinn ze läschen an v5 . |
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.scss
Datei 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.
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 color
an background-color
.
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 Bootstrap scss/_variables.scss
Datei.
Grays
En erweiderten Set vu groe Variabelen an eng Sass Kaart scss/_variables.scss
fir konsequent Schatten vu gro iwwer Äre Projet. Bedenkt datt dëst "cool Greys" sinn, déi zu engem subtile bloen Toun tendéieren, anstatt neutral Greys.
Bannen scss/_variables.scss
fannt Dir Bootstrap Faarfvariablen a Sass Kaart. Hei ass e Beispill vun der $colors
Sass 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 @each
Schleifen 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-colors
an 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-colors
Kaart gebaut fir d'Zuel an den Numm vun eise Modifikatiounsklassen ze personaliséieren.
Hei sinn zwee Beispiller vu wéi mir iwwer d' $theme-colors
Kaart schloe fir Modifikateure fir d' .alert
Komponent 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 @each
Loop fir d' $grid-breakpoints
Sass 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 (bemierkt datt de :root
erfuerderlech ass). Si sinn an eisem _root.scss
Dossier.
: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;
}
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 a 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);
}
}