Theming Bootstrap
Personnaliséiert Bootstrap 4 mat eisen neien agebaute Sass Variablen fir global Stilvirléiften fir einfach Themen a Komponentännerungen.
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 d'gebaut-an Thema aktivéieren Gradienten, Shadows, a méi.
Benotzt eis Quell Sass Dateien fir Variabelen, Kaarten, Mixins a méi ze profitéieren.
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:
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.
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.
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.
All Sass Variabel am Bootstrap 4 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 Variablen 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 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-color
a color
fir d' <body>
Importéieren an d'Kompilatioun vun Bootstrap iwwer npm:
Widderhuelen wéi néideg fir all Variabel am Bootstrap, och déi global Optiounen hei drënner.
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 !default
Fä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 .
Fir eng existent Faarf op eiser $theme-colors
Kaart z'änneren, füügt déi folgend op Är personaliséiert Sass Datei:
Fir eng nei Faarf ze $theme-colors
addéieren, füügt den neie Schlëssel a Wäert derbäi:
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:
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.
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:
Dës erlaben Iech eng Faarf aus enger Sass Kaart ze wielen sou wéi Dir eng Faarfvariabel vu v3 benotzt.
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.
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.
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.
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:
Et kann och fir eenzel Kontrastbedürfnisser benotzt ginn:
Dir kënnt och eng Basisfaarf mat eise Faarfkaartfunktiounen uginn:
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 de Standard 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) |
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) oderfalse |
Aktivéiert virdefinéiert transition s op verschidde Komponenten. |
$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-print-styles |
true (Standard) oderfalse |
Erméiglecht Stiler fir Dréckerei ze optimiséieren. |
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 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:
Faarf Utility Klassen sinn och verfügbar fir Astellung color
an 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.
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.scss
Datei.
En erweiderten Set vu groe Variabelen an eng Sass Kaart scss/_variables.scss
fir konsequent Schatten vu gro iwwer Äre Projet.
Bannen scss/_variables.scss
fannt Dir Bootstrap Faarfvariablen a Sass Kaart. Hei ass e Beispill vun der $colors
Sass Kaart:
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.
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.
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 schleifen fir Modifikateure fir d' .alert
Komponent an all eis .bg-*
Background Utilities ze generéieren.
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.
Sollt Dir Är Ännerunge musse änneren $grid-breakpoints
, gëllen Är Ännerungen op all d'Schleifen, déi iwwer dës Kaart iteréieren.
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.
Hei sinn d'Variabelen déi mir enthalen (Notiz datt de :root
erfuerderlech ass). Si sinn an eisem _root.scss
Dossier.
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.
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:
An hei ass e Beispill vu wat ënnerstëtzt gëtt: