Theming Bootstrap
Pas Bootstrap 4 aan met ons nuwe ingeboude Sass-veranderlikes vir globale stylvoorkeure vir maklike temas en komponentveranderings.
Inleiding
In Bootstrap 3 is temas grootliks gedryf deur veranderlike oorskrywings in MINDER, pasgemaakte CSS en 'n aparte temastylblad wat ons by ons dist
lêers ingesluit het. Met 'n bietjie moeite kan 'n mens die voorkoms van Bootstrap 3 heeltemal herontwerp sonder om aan die kernlêers te raak. Bootstrap 4 bied 'n bekende, maar effens ander benadering.
Tema word nou bewerkstellig deur Sass-veranderlikes, Sass-kaarte en pasgemaakte CSS. Daar is nie meer toegewyde temastylblad nie; in plaas daarvan kan jy die ingeboude tema aktiveer om gradiënte, skaduwees en meer by te voeg.
Sass
Gebruik ons Sass-bronlêers om voordeel te trek uit veranderlikes, kaarte, mixins en meer wanneer Sass saamgestel word deur jou eie bate-pyplyn te gebruik.
Lêerstruktuur
Waar moontlik, vermy die wysiging van Bootstrap se kernlêers. Vir Sass beteken dit om jou eie stylblad te skep wat Bootstrap invoer sodat jy dit kan verander en uitbrei. As u aanvaar dat u 'n pakketbestuurder soos npm gebruik, sal u 'n lêerstruktuur hê wat soos volg lyk:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
As jy ons bronlêers afgelaai het en nie 'n pakketbestuurder gebruik nie, sal jy iets soortgelyk aan daardie struktuur met die hand wil opstel, en Bootstrap se bronlêers apart van jou eie hou.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Invoer
In jou custom.scss
sal jy Bootstrap se bron Sass-lêers invoer. Jy het twee opsies: sluit die hele Bootstrap in, of kies die onderdele wat jy nodig het. Ons moedig laasgenoemde aan, maar wees bewus daarvan dat daar sekere vereistes en afhanklikhede oor ons komponente heen is. Jy sal ook JavaScript vir ons inproppe moet insluit.
// 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";
Met daardie opstelling in plek, kan jy begin om enige van die Sass veranderlikes en kaarte in jou custom.scss
. Jy kan ook begin om dele van Bootstrap onder die // Optional
afdeling by te voeg soos nodig. Ons stel voor dat u die volledige invoerstapel vanaf ons bootstrap.scss
lêer as u beginpunt gebruik.
Veranderlike verstekke
Elke Sass-veranderlike in Bootstrap bevat die !default
vlag wat jou toelaat om die veranderlike se verstekwaarde in jou eie Sass te ignoreer sonder om Bootstrap se bronkode te verander. Kopieer en plak veranderlikes soos nodig, verander hul waardes en verwyder die !default
vlag. As 'n veranderlike reeds toegewys is, sal dit nie hertoegewys word deur die verstekwaardes in Bootstrap nie.
Jy sal die volledige lys van Bootstrap se veranderlikes in vind scss/_variables.scss
. Sommige veranderlikes is ingestel op null
, hierdie veranderlikes voer nie die eienskap uit nie, tensy hulle in jou konfigurasie oorskryf word.
Veranderlike oorskrywings moet kom nadat ons funksies, veranderlikes en mixins ingevoer is, maar voor die res van die invoere.
Hier is 'n voorbeeld wat die background-color
en color
vir die verander <body>
wanneer Bootstrap via npm invoer en saamgestel word:
@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
Herhaal soos nodig vir enige veranderlike in Bootstrap, insluitend die globale opsies hieronder.
Kaarte en lusse
Bootstrap 4 bevat 'n handvol Sass-kaarte, sleutelwaardepare wat dit makliker maak om families van verwante CSS te genereer. Ons gebruik Sass-kaarte vir ons kleure, roosterafbreekpunte en meer. Net soos Sass-veranderlikes, bevat alle Sass-kaarte die !default
vlag en kan dit oorskryf en uitgebrei word.
Sommige van ons Sass-kaarte word by verstek in leë kaarte saamgevoeg. Dit word gedoen om maklike uitbreiding van 'n gegewe Sass-kaart moontlik te maak, maar dit kom ten koste daarvan om die verwydering van items van 'n kaart effens moeiliker te maak.
Verander kaart
Om 'n bestaande kleur in ons $theme-colors
kaart te verander, voeg die volgende by jou pasgemaakte Sass-lêer:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Voeg by kaart
Om 'n nuwe kleur by te $theme-colors
voeg, voeg die nuwe sleutel en waarde by:
$theme-colors: (
"custom-color": #900
);
Verwyder van kaart
Om kleure van $theme-colors
, of enige ander kaart te verwyder, gebruik map-remove
. Wees bewus daarvan dat jy dit tussen ons vereistes en opsies moet invoeg:
// 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";
...
Vereiste sleutels
Bootstrap veronderstel die teenwoordigheid van 'n paar spesifieke sleutels binne Sass-kaarte soos ons dit gebruik het en dit self uitbrei. Soos jy die ingeslote kaarte pasmaak, kan jy foute teëkom waar 'n spesifieke Sass-kaart se sleutel gebruik word.
Byvoorbeeld, ons gebruik die primary
, success
, en danger
sleutels van $theme-colors
vir skakels, knoppies en vormtoestande. Die vervanging van die waardes van hierdie sleutels behoort geen probleme op te lewer nie, maar die verwydering daarvan kan probleme met Sass-samestelling veroorsaak. In hierdie gevalle sal jy die Sass-kode wat van daardie waardes gebruik maak, moet verander.
Funksies
Bootstrap gebruik verskeie Sass-funksies, maar slegs 'n subset is van toepassing op algemene temas. Ons het drie funksies ingesluit om waardes uit die kleurkaarte te kry:
@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);
}
Dit laat jou toe om een kleur van 'n Sass-kaart te kies, baie soos hoe jy 'n kleurveranderlike van v3 sou gebruik.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Ons het ook 'n ander funksie om 'n spesifieke vlak van kleur van die $theme-colors
kaart af te kry. Negatiewe vlakwaardes sal die kleur ligter maak, terwyl hoër vlakke donkerder sal word.
@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);
}
In die praktyk sal jy die funksie noem en twee parameters deurgee: die naam van die kleur van $theme-colors
(bv. primêre of gevaar) en 'n numeriese vlak.
.custom-element {
color: theme-color-level(primary, -10);
}
Bykomende funksies kan in die toekoms bygevoeg word of jou eie pasgemaakte Sass om vlakfunksies vir bykomende Sass-kaarte te skep, of selfs 'n generiese een as jy meer breedvoerig wil wees.
Kleur kontras
'n Bykomende funksie wat ons in Bootstrap insluit, is die kleurkontrasfunksie, color-yiq
. Dit gebruik die YIQ-kleurspasie om outomaties 'n ligte ( #fff
) of donker ( #111
) kontraskleur terug te gee gebaseer op die gespesifiseerde basiskleur. Hierdie funksie is veral nuttig vir mixins of loops waar jy verskeie klasse genereer.
Byvoorbeeld, om kleurmonsters vanaf ons $theme-colors
kaart te genereer:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Dit kan ook gebruik word vir eenmalige kontrasbehoeftes:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
U kan ook 'n basiskleur spesifiseer met ons kleurkaartfunksies:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Ontsnap SVG
Ons gebruik die escape-svg
funksie om die <
, >
en #
karakters vir SVG agtergrond beelde te ontsnap. Hierdie karakters moet ontsnap word om die agtergrondprente behoorlik in IE weer te gee. Wanneer die escape-svg
funksie gebruik word, moet data-URI's aangehaal word.
Optel en aftrek funksies
Ons gebruik die add
en subtract
-funksies om die CSS- calc
funksie om te draai. Die primêre doel van hierdie funksies is om foute te vermy wanneer 'n "eenheidlose" 0
waarde in 'n calc
uitdrukking oorgedra word. Uitdrukkings soos calc(10px - 0)
sal 'n fout in alle blaaiers gee, al is dit wiskundig korrek.
Voorbeeld waar die berekening geldig 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);
}
Voorbeeld waar die berekening ongeldig 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 opsies
Pas Bootstrap 4 aan met ons ingeboude persoonlike veranderlikes-lêer en wissel maklik globale CSS-voorkeure met nuwe $enable-*
Sass-veranderlikes. Ignoreer 'n veranderlike se waarde en hersaamstel met npm run test
soos nodig.
Jy kan hierdie veranderlikes vind en pasmaak vir sleutel globale opsies in Bootstrap se scss/_variables.scss
lêer.
Veranderlik | Waardes | Beskrywing |
---|---|---|
$spacer |
1rem (verstek), of enige waarde > 0 |
Spesifiseer die verstekspasieerwaarde om ons spasieerhulpprogramme programmaties te genereer . |
$enable-rounded |
true (verstek) offalse |
Aktiveer vooraf gedefinieerde border-radius style op verskeie komponente. |
$enable-shadows |
true of false (verstek) |
Maak vooraf gedefinieerde dekoratiewe box-shadow style op verskeie komponente moontlik. Affekteer nie box-shadow s wat vir fokustoestande gebruik word nie. |
$enable-gradients |
true of false (verstek) |
Aktiveer voorafbepaalde gradiënte via background-image style op verskeie komponente. |
$enable-transitions |
true (verstek) offalse |
Aktiveer vooraf gedefinieerde transition s op verskeie komponente. |
$enable-prefers-reduced-motion-media-query |
true (verstek) offalse |
Aktiveer die prefers-reduced-motion medianavraag , wat sekere animasies/oorgange onderdruk op grond van die gebruikers se blaaier/bedryfstelselvoorkeure. |
$enable-hover-media-query |
true of false (verstek) |
Afgedank |
$enable-grid-classes |
true (verstek) offalse |
Aktiveer die generering van CSS-klasse vir die roosterstelsel (bv. .container , .row , .col-md-1 , ens.). |
$enable-caret |
true (verstek) offalse |
Aktiveer pseudo-element-karet op .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (verstek) offalse |
Voeg "hand"-wyser by nie-gedeaktiveerde knoppie-elemente. |
$enable-print-styles |
true (verstek) offalse |
Aktiveer style vir die optimalisering van drukwerk. |
$enable-responsive-font-sizes |
true of false (verstek) |
Aktiveer responsiewe lettergroottes . |
$enable-validation-icons |
true (verstek) offalse |
Aktiveer background-image ikone binne tekstuele invoere en sommige pasgemaakte vorms vir bekragtigingstate. |
$enable-deprecation-messages |
true (verstek) offalse |
Stel op false om waarskuwings te versteek wanneer enige van die verouderde mengsels en funksies gebruik word wat beplan word om in verwyder te word v5 . |
Kleur
Baie van Bootstrap se verskillende komponente en nutsprogramme word gebou deur 'n reeks kleure wat in 'n Sass-kaart gedefinieer word. Hierdie kaart kan in Sass oorgeskakel word om vinnig 'n reeks reëls te genereer.
Alle kleure
Alle kleure beskikbaar in Bootstrap 4, is beskikbaar as Sass veranderlikes en 'n Sass kaart in scss/_variables.scss
lêer. Dit sal uitgebrei word in die daaropvolgende klein vrystellings om bykomende skakerings by te voeg, baie soos die grysskaalpalet wat ons reeds insluit.
Hier is hoe jy dit in jou Sass kan gebruik:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Kleurnutsklasse is ook beskikbaar vir instelling color
en background-color
.
Tema kleure
Ons gebruik 'n subset van alle kleure om 'n kleiner kleurpalet te skep vir die generering van kleurskemas, ook beskikbaar as Sass-veranderlikes en 'n Sass-kaart in Bootstrap se scss/_variables.scss
lêer.
Grys
'n Uitgebreide stel grys veranderlikes en 'n Sass-kaart in scss/_variables.scss
vir konsekwente skakerings van grys oor jou projek. Let daarop dat dit "koel grys" is, wat neig na 'n subtiele blou toon, eerder as neutrale grys.
Binne scss/_variables.scss
sal jy Bootstrap se kleurveranderlikes en Sass-kaart vind. Hier is 'n voorbeeld van die $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;
Voeg waardes by, verwyder of wysig waardes binne die kaart om op te dateer hoe dit in baie ander komponente gebruik word. Ongelukkig gebruik nie elke komponent tans hierdie Sass-kaart nie. Toekomstige opdaterings sal daarna streef om hierop te verbeter. Beplan tot dan om van die ${color}
veranderlikes en hierdie Sass-kaart gebruik te maak.
Komponente
Baie van Bootstrap se komponente en nutsprogramme is gebou met @each
lusse wat oor 'n Sass-kaart herhaal. Dit is veral nuttig om variante van 'n komponent deur ons te genereer $theme-colors
en responsiewe variante vir elke breekpunt te skep. Soos jy hierdie Sass-kaarte pasmaak en hersaamstel, sal jy outomaties jou veranderinge in hierdie lusse weerspieël sien.
Wysigers
Baie van Bootstrap se komponente is gebou met 'n basis-modifiseerder klas benadering. Dit beteken die grootste deel van die stilering is in 'n basisklas (bv. .btn
) vervat terwyl stylvariasies beperk is tot wysigerklasse (bv. .btn-danger
). Hierdie wysigerklasse word vanaf die $theme-colors
kaart gebou om die nommer en naam van ons wysigerklasse aan te pas.
Hier is twee voorbeelde van hoe ons oor die $theme-colors
kaart loop om wysigers vir die .alert
komponent en al ons .bg-*
agtergrondhulpmiddels te genereer.
// 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);
}
Responsief
Hierdie Sass-lusse is ook nie beperk tot kleurkaarte nie. U kan ook responsiewe variasies van u komponente of nutsprogramme genereer. Neem byvoorbeeld ons responsiewe teksbelyningshulpmiddels waar ons 'n @each
lus vir die $grid-breakpoints
Sass-kaart meng met 'n medianavraag.
@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; }
}
}
As jy jou , moet wysig $grid-breakpoints
, sal jou veranderinge van toepassing wees op al die lusse wat oor daardie kaart herhaal.
CSS veranderlikes
Bootstrap 4 bevat ongeveer twee dosyn pasgemaakte CSS-eienskappe (veranderlikes) in sy saamgestelde CSS. Dit bied maklike toegang tot algemeen gebruikte waardes soos ons temakleure, breekpunte en primêre lettertipestapels wanneer jy in jou blaaier se Inspekteur, 'n kodesandbak of algemene prototipering werk.
Beskikbare veranderlikes
Hier is die veranderlikes wat ons insluit (let daarop dat die :root
vereis word). Hulle is in ons _root.scss
lêer geleë.
: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;
}
Voorbeelde
CSS-veranderlikes bied soortgelyke buigsaamheid as Sass se veranderlikes, maar sonder die behoefte aan samestelling voordat dit aan die blaaier bedien word. Hier stel ons byvoorbeeld ons bladsy se lettertipe en skakelstyle met CSS-veranderlikes terug.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Breekpunt veranderlikes
Alhoewel ons oorspronklik breekpunte in ons CSS-veranderlikes ingesluit het (bv. --breakpoint-md
), word dit nie in medianavrae ondersteun nie , maar hulle kan steeds binne reëlstelle in medianavrae gebruik word. Hierdie breekpuntveranderlikes bly in die saamgestelde CSS vir terugwaartse versoenbaarheid, aangesien dit deur JavaScript gebruik kan word. Kom meer te wete in die spesifikasie .
Hier is 'n voorbeeld van wat nie ondersteun word nie:
@media (min-width: var(--breakpoint-sm)) {
...
}
En hier is 'n voorbeeld van wat ondersteun word:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}