Theming Bootstrap
Oanpasse Bootstrap 4 mei ús nije ynboude Sass-fariabelen foar foarkarren foar globale styl foar maklike tema- en komponintwizigingen.
Ynlieding
Yn Bootstrap 3 waard tematyk foar in grut part dreaun troch fariabele oerskriuwingen yn LESS, oanpaste CSS, en in apart temastylblêd dat wy yn ús dist
bestannen opnommen hawwe. Mei wat muoite koe men it uterlik fan Bootstrap 3 folslein opnij ûntwerpe sûnder de kearnbestannen oan te reitsjen. Bootstrap 4 biedt in fertroude, mar wat oare oanpak.
No, tematyk wurdt berikt troch Sass fariabelen, Sass kaarten, en oanpaste CSS. D'r is gjin tawijd temastylblêd mear; ynstee kinne jo it ynboude tema ynskeakelje om gradiënten, skaden en mear ta te foegjen.
Sass
Brûk ús boarne Sass-bestannen om te profitearjen fan fariabelen, kaarten, mixins, en mear by it kompilearjen fan Sass mei jo eigen assetpipeline.
Triemstruktuer
Foarkom it wizigjen fan Bootstrap's kearnbestannen wannear mooglik. Foar Sass betsjut dat it meitsjen fan jo eigen stylblêd dat Bootstrap ymportearret sadat jo it kinne wizigje en útwreidzje. Oannommen dat jo in pakketbehearder lykas npm brûke, sille jo in bestânstruktuer hawwe dy't der sa útsjocht:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
As jo ús boarnebestannen hawwe ynladen en gjin pakketbehearder brûke, wolle jo wat ferlykber mei dy struktuer manuell ynstelle, en de boarnebestannen fan Bootstrap apart fan jo eigen hâlde.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Ymportearje
Yn jo custom.scss
sille jo Bootstrap's boarne Sass-bestannen ymportearje. Jo hawwe twa opsjes: befetsje alle Bootstrap, of kies de dielen dy't jo nedich binne. Wy stimulearje dat lêste, hoewol bewust wêze dat d'r wat easken en ôfhinklikens binne oer ús komponinten. Jo sille ek wat JavaScript moatte opnimme foar ús plugins.
// 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";
Mei dy opset yn plak, kinne jo begjinne te wizigjen ien fan de Sass fariabelen en kaarten yn jo custom.scss
. Jo kinne ek begjinne te foegjen dielen fan Bootstrap ûnder de // Optional
seksje as nedich. Wy stelle foar om de folsleine ymportstapel út ús bootstrap.scss
bestân te brûken as jo útgongspunt.
Fariabele standerts
Elke Sass-fariabele yn Bootstrap omfettet de !default
flagge wêrtroch jo de standertwearde fan 'e fariabele yn jo eigen Sass kinne oerskriuwe sûnder de boarnekoade fan Bootstrap te feroarjen. Kopiearje en plakke fariabelen as nedich, wizigje har wearden en ferwiderje de !default
flagge. As in fariabele al is tawiisd, dan sil it net opnij wurde tawiisd troch de standertwearden yn Bootstrap.
Jo sille de folsleine list fan Bootstrap's fariabelen fine yn scss/_variables.scss
. Guon fariabelen binne ynsteld op null
, dizze fariabelen jouwe it pân net út, útsein as se yn jo konfiguraasje oerskreaun wurde.
Fariabele oerskriuwingen moatte komme neidat ús funksjes, fariabelen en mixins binne ymporteare, mar foar de rest fan 'e ymporten.
Hjir is in foarbyld dat de background-color
en feroaret by color
it <body>
ymportearjen en kompilearjen fan Bootstrap fia npm:
@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
Werhelje as nedich foar elke fariabele yn Bootstrap, ynklusyf de globale opsjes hjirûnder.
Kaarten en loops
Bootstrap 4 omfettet in hânfol Sass-kaarten, kaaiweardepearen dy't it makliker meitsje om famyljes fan relatearre CSS te generearjen. Wy brûke Sass kaarten foar ús kleuren, raster breakpoints, en mear. Krekt as Sass fariabelen, alle Sass kaarten befetsje de !default
flagge en kin wurde oerskreaun en útwreide.
Guon fan ús Sass-kaarten binne standert gearfoege yn lege. Dit wurdt dien om te tastean maklik útwreiding fan in opjûne Sass map, mar komt op 'e kosten fan in make fuortsmite items út in kaart wat dreger.
Map feroarje
Om in besteande kleur yn ús $theme-colors
kaart te feroarjen, foegje it folgjende ta oan jo oanpaste Sass-bestân:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Taheakje oan kaart
Om in nije kleur ta te $theme-colors
foegjen, foegje de nije kaai en wearde ta:
$theme-colors: (
"custom-color": #900
);
Fuortsmite fan kaart
Om kleuren te ferwiderjen fan $theme-colors
, of in oare kaart, brûk map-remove
. Wês bewust dat jo it moatte ynfoegje tusken ús easken en opsjes:
// 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";
...
Required kaaien
Bootstrap giet oan fan de oanwêzigens fan guon spesifike kaaien binnen Sass-kaarten lykas wy dizze sels brûkten en útwreidzje. As jo de opnommen kaarten oanpasse, kinne jo flaters tsjinkomme wêr't de kaai fan in spesifike Sass-kaart wurdt brûkt.
Wy brûke bygelyks de primary
, success
, en danger
toetsen fan $theme-colors
foar keppelings, knoppen en formulierstaten. It ferfangen fan de wearden fan dizze kaaien soe gjin problemen presintearje, mar it fuortheljen fan se kin Sass-kompilaasjeproblemen feroarsaakje. Yn dizze gefallen moatte jo de Sass-koade oanpasse dy't gebrûk makket fan dy wearden.
Funksjes
Bootstrap brûkt ferskate Sass-funksjes, mar allinich in subset is fan tapassing op algemiene tema's. Wy hawwe trije funksjes opnommen foar it heljen fan wearden fan 'e kleurkaarten:
@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);
}
Hjirmei kinne jo ien kleur kieze fan in Sass-kaart, lykas jo in kleurfariabele fan v3 soene brûke.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Wy hawwe ek in oare funksje foar it krijen fan in bepaald nivo fan kleur fan 'e $theme-colors
kaart. Negative nivowearden sille de kleur ferljochtsje, wylst hegere nivo's tsjusterder wurde.
@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);
}
Yn 'e praktyk soene jo de funksje neame en twa parameters trochjaan: de namme fan' e kleur fan $theme-colors
(bygelyks primêr of gefaar) en in numerike nivo.
.custom-element {
color: theme-color-level(primary, -10);
}
Oanfoljende funksjes kinne yn 'e takomst tafoege wurde as jo eigen oanpaste Sass om nivofunksjes te meitsjen foar ekstra Sass-kaarten, of sels in generike as jo mear verbose woene.
Kleur kontrast
In ekstra funksje dy't wy opnimme yn Bootstrap is de kleurkontrastfunksje color-yiq
,. It brûkt de YIQ-kleurromte om automatysk in ljochte ( #fff
) of donkere ( #111
) kontrastkleur werom te jaan op basis fan de opjûne basiskleur. Dizze funksje is benammen nuttich foar mixins as loops wêr't jo meardere klassen generearje.
Bygelyks om kleurstalen te generearjen fan ús $theme-colors
kaart:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
It kin ek brûkt wurde foar ienmalige kontrastbehoeften:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Jo kinne ek in basiskleur opjaan mei ús kleurkaartfunksjes:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Escape SVG
Wy brûke de escape-svg
funksje om te ûntkommen oan de <
, >
en #
karakters foar SVG eftergrûnôfbyldings. Dizze karakters moatte ûntsnappe wurde om de eftergrûnôfbyldings yn IE goed wer te jaan. By it brûken fan de escape-svg
funksje moatte gegevens URI's wurde oanhelle.
Funksjes tafoegje en subtractearje
Wy brûke de funksjes add
en subtract
om de CSS- calc
funksje te wikkeljen. It primêre doel fan dizze funksjes is om flaters te foarkommen as in "ienheidleaze" 0
wearde wurdt trochjûn yn in calc
útdrukking. Ekspresjes lykas calc(10px - 0)
sille in flater weromjaan yn alle browsers, nettsjinsteande wiskundich korrekt.
Foarbyld wêr't de berekkening jildich is:
$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);
}
Foarbyld wêr't de berekkening ûnjildich is:
$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 opsjes
Oanpasse Bootstrap 4 mei ús ynboude triem mei oanpaste fariabelen en wikselje maklik globale CSS-foarkarren mei nije $enable-*
Sass-fariabelen. Oerskriuwe de wearde fan in fariabele en kompilearje mei npm run test
as nedich.
Jo kinne dizze fariabelen fine en oanpasse foar wichtige globale opsjes yn it scss/_variables.scss
bestân fan Bootstrap.
Fariabel | Wearden | Beskriuwing |
---|---|---|
$spacer |
1rem (standert), of elke wearde > 0 |
Spesifisearret de standert spacerwearde om programmatysk ús spacer-hulpprogramma 's te generearjen . |
$enable-rounded |
true (standert) offalse |
Aktivearret foarôf definieare border-radius stilen op ferskate komponinten. |
$enable-shadows |
true of false (standert) |
Aktivearret foarôf definieare dekorative box-shadow stilen op ferskate komponinten. Hat gjin ynfloed op box-shadow s brûkt foar fokus steaten. |
$enable-gradients |
true of false (standert) |
Aktivearret foarôf definieare gradiënten fia background-image stilen op ferskate komponinten. |
$enable-transitions |
true (standert) offalse |
Aktivearret foarôf definieare transition s op ferskate komponinten. |
$enable-prefers-reduced-motion-media-query |
true (standert) offalse |
Aktiveart de prefers-reduced-motion mediafraach , dy't bepaalde animaasjes/transysjes ûnderdrukt op basis fan de foarkarren fan 'e blêder/bestjoeringssysteem fan 'e brûkers. |
$enable-hover-media-query |
true of false (standert) |
Deprecated |
$enable-grid-classes |
true (standert) offalse |
Aktivearret de generaasje fan CSS-klassen foar it rastersysteem (bgl. .container , .row , .col-md-1 , ensfh.). |
$enable-caret |
true (standert) offalse |
Aktivearret pseudo elemint caret op .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (standert) offalse |
Foegje "hân" rinnerke ta oan net-útskeakele knopeleminten. |
$enable-print-styles |
true (standert) offalse |
Stelt stilen yn foar optimalisearjen fan printsjen. |
$enable-responsive-font-sizes |
true of false (standert) |
Aktivearret responsive lettertypegrutte . |
$enable-validation-icons |
true (standert) offalse |
Aktiveart background-image ikoanen binnen tekstynfier en guon oanpaste formulieren foar falidaasjestaten. |
$enable-deprecation-messages |
true (standert) offalse |
Stel yn false om warskôgingen te ferbergjen by it brûken fan ien fan 'e ferâldere mixins en funksjes dy't pland binne om te ferwiderjen yn v5 . |
Kleur
In protte fan Bootstrap's ferskate komponinten en nutsbedriuwen binne boud troch in searje kleuren definieare yn in Sass-kaart. Dizze kaart kin yn Sass oerlutsen wurde om fluch in searje regelsets te generearjen.
Alle kleuren
Alle kleuren beskikber yn Bootstrap 4, binne beskikber as Sass fariabelen en in Sass map yn scss/_variables.scss
triem. Dit sil wurde útwreide yn folgjende lytse releases om ekstra skaden ta te foegjen, krekt lykas it griisskalepalet dat wy al befetsje.
Hjir is hoe't jo dizze kinne brûke yn jo Sass:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Kleur nutklassen binne ek beskikber foar ynstelling color
en background-color
.
Tema kleuren
Wy brûke in subset fan alle kleuren om in lytser kleurpalet te meitsjen foar it generearjen fan kleurskema's, ek beskikber as Sass-fariabelen en in Sass-kaart yn Bootstrap's scss/_variables.scss
bestân.
Griis
In wiidweidige set grize fariabelen en in Sass-kaart yn scss/_variables.scss
foar konsekwinte tinten griis oer jo projekt. Tink derom dat dit "koele griis" binne, dy't nei in subtile blauwe toan neigeare, ynstee fan neutrale griis.
Binnen scss/_variables.scss
fine jo Bootstrap's kleurfariabelen en Sass-kaart. Hjir is in foarbyld fan de $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;
Wearden tafoegje, fuortsmite of wizigje binnen de kaart om te aktualisearjen hoe't se wurde brûkt yn in protte oare komponinten. Spitigernôch brûkt op dit stuit net elke komponint dizze Sass-kaart. Takomstige updates sille stribje om dit te ferbetterjen. Oant dan plan om gebrûk te meitsjen fan de ${color}
fariabelen en dizze Sass-kaart.
Components
In protte fan Bootstrap's komponinten en nutsbedriuwen binne boud mei @each
loops dy't iterearje oer in Sass-kaart. Dit is benammen nuttich foar it generearjen fan farianten fan in komponint troch ús $theme-colors
en it meitsjen fan responsive farianten foar elk brekpunt. Wylst jo dizze Sass-kaarten oanpasse en opnij kompilearje, sille jo jo wizigingen automatysk sjen yn dizze loops.
Modifiers
In protte fan Bootstrap's komponinten binne boud mei in base-modifier klasse oanpak. Dit betsjut dat it grutste part fan 'e styling is befette yn in basisklasse (bgl. .btn
) wylst stylfariaasjes beheind binne ta modifierklassen (bgl. .btn-danger
). Dizze modifier-klassen binne boud fan 'e $theme-colors
kaart om it oantal en de namme fan ús modifier-klassen oan te passen.
Hjir binne twa foarbylden fan hoe't wy oer de $theme-colors
kaart rinne om modifiers te generearjen foar de .alert
komponint en al ús .bg-*
eftergrûnhelpprogramma's.
// 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);
}
Responsive
Dizze Sass-loops binne ek net beheind ta kleurkaarten. Jo kinne ek responsive fariaasjes generearje fan jo komponinten of nutsbedriuwen. Nim bygelyks ús responsive nutsfoarsjenningen foar tekstôfstimming wêr't wy in @each
lus mingje foar de $grid-breakpoints
Sass-kaart mei in mediafraach omfetsje.
@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; }
}
}
Mochten jo jo wizigje moatte $grid-breakpoints
, dan sille jo wizigingen jilde foar alle loops dy't oer dy kaart iterearje.
CSS fariabelen
Bootstrap 4 omfettet sawat twa tsientallen oanpaste CSS-eigenskippen (fariabelen) yn syn kompilearre CSS. Dizze jouwe maklike tagong ta gewoan brûkte wearden lykas ús temakleuren, brekpunten en primêre lettertypestapels as jo wurkje yn 'e Inspector fan jo blêder, in koade sânbak, of algemiene prototyping.
Beskikbere fariabelen
Hjir binne de fariabelen dy't wy opnimme (notysje dat de :root
fereaske is). Se steane yn ús _root.scss
bestân.
: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;
}
Foarbylden
CSS-fariabelen biede ferlykbere fleksibiliteit as de fariabelen fan Sass, mar sûnder de needsaak foar kompilaasje foardat se wurde tsjinne oan 'e browser. Bygelyks, hjir stelle wy it lettertype en keppelingsstilen fan ús side werom mei CSS-fariabelen.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Breakpoint fariabelen
Wylst wy oarspronklik brekpunten opnommen hawwe yn ús CSS-fariabelen (bgl. --breakpoint-md
), wurde dizze net stipe yn mediafragen , mar se kinne noch brûkt wurde binnen regelsets yn mediafragen. Dizze brekpuntfariabelen bliuwe yn 'e kompilearre CSS foar efterkompatibiliteit, om't se kinne wurde brûkt troch JavaScript. Learje mear yn 'e spesifikaasje .
Hjir is in foarbyld fan wat net stipe wurdt:
@media (min-width: var(--breakpoint-sm)) {
...
}
En hjir is in foarbyld fan wat wurdt stipe:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}