Tematiziran Bootstrap
Prilagodite Bootstrap 4 z našimi novimi vgrajenimi spremenljivkami Sass za globalne nastavitve sloga za enostavno spreminjanje tem in komponent.
Uvod
V Bootstrap 3 so tematizacijo v veliki meri poganjale preglasitve spremenljivk v LESS, CSS po meri in ločena tabela slogov teme, ki smo jo vključili v naše dist
datoteke. Z nekaj truda bi lahko popolnoma preoblikovali videz Bootstrapa 3, ne da bi se dotaknili osnovnih datotek. Bootstrap 4 ponuja znan, a nekoliko drugačen pristop.
Zdaj je tematizacija dosežena s spremenljivkami Sass, zemljevidi Sass in CSS po meri. Ni več namenske tabele slogov tem; namesto tega lahko omogočite vgrajeno temo za dodajanje prelivov, senc in drugega.
Sass
Uporabite naše izvorne datoteke Sass, da izkoristite spremenljivke, zemljevide, mešanice in drugo pri prevajanju Sass z uporabo lastnega cevovoda sredstev.
Struktura datoteke
Kadarkoli je mogoče, se izogibajte spreminjanju jedrnih datotek Bootstrapa. Za Sass to pomeni ustvarjanje lastne tabele slogov, ki uvozi Bootstrap, da jo lahko spreminjate in razširite. Ob predpostavki, da uporabljate upravitelja paketov, kot je npm, boste imeli strukturo datoteke, ki je videti takole:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Če ste prenesli naše izvorne datoteke in ne uporabljate upravitelja paketov, boste želeli ročno nastaviti nekaj podobnega tej strukturi, tako da bodo izvorne datoteke Bootstrapa ločene od vaših.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Uvažanje
V svoj custom.scss
, boste uvozili izvorne datoteke Sass Bootstrapa. Imate dve možnosti: vključite ves Bootstrap ali izberite dele, ki jih potrebujete. Spodbujamo slednje, čeprav se zavedajte, da obstajajo nekatere zahteve in odvisnosti med našimi komponentami. Za naše vtičnike boste morali vključiti tudi nekaj JavaScripta.
// 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";
S to nastavitvijo lahko začnete spreminjati katero koli od spremenljivk in zemljevidov Sass v svojem custom.scss
. Po potrebi lahko začnete tudi dodajati dele Bootstrapa pod // Optional
razdelek. Predlagamo, da bootstrap.scss
kot izhodišče uporabite celoten uvozni sklad iz naše datoteke.
Privzete vrednosti spremenljivk
Vsaka spremenljivka Sass v Bootstrapu vključuje !default
zastavico, ki vam omogoča, da preglasite privzeto vrednost spremenljivke v svojem Sassu, ne da bi spremenili izvorno kodo Bootstrapa. Po potrebi kopirajte in prilepite spremenljivke, spremenite njihove vrednosti in odstranite !default
zastavico. Če je bila spremenljivka že dodeljena, potem ne bo ponovno dodeljena s privzetimi vrednostmi v Bootstrapu.
Celoten seznam spremenljivk Bootstrapa boste našli v scss/_variables.scss
. Nekatere spremenljivke so nastavljene na null
, te spremenljivke ne izpišejo lastnosti, razen če so preglasene v vaši konfiguraciji.
Preglasitve spremenljivk morajo priti po uvozu naših funkcij, spremenljivk in miksinov, vendar pred ostalimi uvozi.
Tukaj je primer, ki spremeni background-color
in color
za <body>
pri uvažanju in prevajanju Bootstrapa prek 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
Po potrebi ponovite za katero koli spremenljivko v programu Bootstrap, vključno s spodnjimi globalnimi možnostmi.
Zemljevidi in zanke
Bootstrap 4 vključuje peščico zemljevidov Sass, parov ključnih vrednosti, ki olajšajo ustvarjanje družin povezanih CSS. Zemljevide Sass uporabljamo za naše barve, prelomne točke mreže in drugo. Tako kot spremenljivke Sass tudi vse karte Sass vključujejo !default
zastavico in jih je mogoče preglasiti in razširiti.
Nekateri naši zemljevidi Sass so privzeto združeni v prazne. To je storjeno, da se omogoči enostavno širjenje danega zemljevida Sass, vendar gre za ceno, da je odstranjevanje elementov z zemljevida nekoliko težje.
Spremeni zemljevid
Če želite spremeniti obstoječo barvo na našem $theme-colors
zemljevidu, svoji datoteki Sass po meri dodajte naslednje:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Dodaj na zemljevid
Če želite dodati novo barvo v $theme-colors
, dodajte nov ključ in vrednost:
$theme-colors: (
"custom-color": #900
);
Odstrani z zemljevida
Če želite odstraniti barve iz $theme-colors
ali katerega koli drugega zemljevida, uporabite map-remove
. Zavedajte se, da ga morate vstaviti med naše zahteve in možnosti:
// 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";
...
Zahtevani ključi
Bootstrap predpostavlja prisotnost nekaterih specifičnih ključev v zemljevidih Sass, kot smo jih uporabljali, in jih sami razširimo. Ko prilagajate vključene zemljevide, lahko naletite na napake, kjer se uporablja določen ključ zemljevida Sass.
Na primer, uporabljamo tipke primary
, success
in za povezave, gumbe in stanja obrazca. Zamenjava vrednosti teh ključev ne bi smela povzročati težav, vendar lahko njihova odstranitev povzroči težave pri prevajanju Sass. V teh primerih boste morali spremeniti kodo Sass, ki uporablja te vrednosti.danger
$theme-colors
Funkcije
Bootstrap uporablja več funkcij Sass, vendar je le podskupina uporabna za splošno tematiziranje. Vključili smo tri funkcije za pridobivanje vrednosti iz barvnih zemljevidov:
@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);
}
Ti vam omogočajo, da izberete eno barvo iz zemljevida Sass, podobno kot bi uporabili barvno spremenljivko iz v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Imamo tudi drugo funkcijo za pridobivanje določene ravni barve iz $theme-colors
zemljevida. Negativne vrednosti ravni bodo osvetlile barvo, medtem ko bodo višje ravni potemnile.
@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);
}
V praksi bi poklicali funkcijo in ji posredovali dva parametra: ime barve iz $theme-colors
(npr. primarna ali nevarnost) in številčno raven.
.custom-element {
color: theme-color-level(primary, -10);
}
V prihodnosti bi lahko dodali dodatne funkcije ali svoj Sass po meri za ustvarjanje funkcij ravni za dodatne zemljevide Sass ali celo generično, če bi želeli biti bolj podrobni.
Barvni kontrast
Dodatna funkcija, ki jo vključujemo v Bootstrap, je funkcija barvnega kontrasta, color-yiq
. Uporablja barvni prostor YIQ za samodejno vrnitev svetle ( #fff
) ali temne ( #111
) kontrastne barve glede na podano osnovno barvo. Ta funkcija je še posebej uporabna za miksine ali zanke, kjer ustvarjate več razredov.
Na primer, za ustvarjanje barvnih vzorcev iz našega $theme-colors
zemljevida:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Uporablja se lahko tudi za enkratne kontrastne potrebe:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Določite lahko tudi osnovno barvo z našimi funkcijami barvne karte:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Escape SVG
escape-svg
Funkcijo uporabljamo za ubežanje <
znakov >
in #
za slike ozadja SVG. Za pravilno upodobitev slik ozadja v IE je treba te znake ubežati. Pri uporabi escape-svg
funkcije morajo biti podatkovni URI-ji navedeni v narekovajih.
Funkciji seštevanja in odštevanja
Funkciji add
in uporabljamo subtract
za zavijanje funkcije CSS calc
. Primarni namen teh funkcij je preprečiti napake, ko 0
se v izraz posreduje vrednost »brez enote« calc
. Izrazi, kot calc(10px - 0)
je, vrnejo napako v vseh brskalnikih, čeprav so matematično pravilni.
Primer, ko je izračun veljaven:
$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);
}
Primer, ko je izračun neveljaven:
$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 možnosti
Prilagodite Bootstrap 4 z našo vgrajeno datoteko s spremenljivkami po meri in preprosto preklapljajte med globalnimi nastavitvami CSS z novimi $enable-*
spremenljivkami Sass. Preglasite vrednost spremenljivke in npm run test
po potrebi znova prevedite z.
Te spremenljivke za ključne globalne možnosti lahko najdete in prilagodite v scss/_variables.scss
datoteki Bootstrap.
Spremenljivka | Vrednote | Opis |
---|---|---|
$spacer |
1rem (privzeto) ali katera koli vrednost > 0 |
Podaja privzeto vrednost preslednika za programsko ustvarjanje naših pripomočkov za presledke . |
$enable-rounded |
true (privzeto) ozfalse |
Omogoča vnaprej določene border-radius sloge na različnih komponentah. |
$enable-shadows |
true ali false (privzeto) |
Omogoča vnaprej določene dekorativne box-shadow sloge na različnih komponentah. Ne vpliva na box-shadow s, ki se uporabljajo za stanja ostrenja. |
$enable-gradients |
true ali false (privzeto) |
Omogoča vnaprej določene prelive prek background-image slogov na različnih komponentah. |
$enable-transitions |
true (privzeto) ozfalse |
Omogoča vnaprej določene transition s na različnih komponentah. |
$enable-prefers-reduced-motion-media-query |
true (privzeto) ozfalse |
Omogoči prefers-reduced-motion predstavnostno poizvedbo , ki zavre določene animacije/prehode glede na nastavitve brskalnika/operacijskega sistema uporabnikov. |
$enable-hover-media-query |
true ali false (privzeto) |
Zastarelo |
$enable-grid-classes |
true (privzeto) ozfalse |
Omogoča generiranje razredov CSS za mrežni sistem (npr., .container , .row , .col-md-1 itd.). |
$enable-caret |
true (privzeto) ozfalse |
Omogoči kazalko psevdo elementa na .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (privzeto) ozfalse |
Elementom gumbov, ki niso onemogočeni, dodajte kazalec »roka«. |
$enable-print-styles |
true (privzeto) ozfalse |
Omogoča sloge za optimizacijo tiskanja. |
$enable-responsive-font-sizes |
true ali false (privzeto) |
Omogoča odzivne velikosti pisave . |
$enable-validation-icons |
true (privzeto) ozfalse |
Omogoča background-image ikone znotraj besedilnih vnosov in nekaterih obrazcev po meri za stanja preverjanja. |
$enable-deprecation-messages |
true (privzeto) ozfalse |
Nastavite na , če false želite skriti opozorila pri uporabi katerega koli od zastarelih miksinov in funkcij, ki naj bi jih odstranili v v5 . |
barva
Številne Bootstrapove različne komponente in pripomočki so zgrajeni s serijo barv, definiranih v zemljevidu Sass. Ta zemljevid je v Sassu mogoče zankati, da hitro ustvarite niz naborov pravil.
Vse barve
Vse barve, ki so na voljo v Bootstrap 4, so na voljo kot spremenljivke Sass in zemljevid Sass v scss/_variables.scss
datoteki. To bo razširjeno v naslednjih manjših izdajah za dodajanje dodatnih odtenkov, podobno kot paleta sivin , ki jo že vključujemo.
Tukaj je opisano, kako jih lahko uporabite v svojem Sassu:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Razredi uporabnosti barv so na voljo tudi za nastavitev color
in background-color
.
Tematske barve
Uporabljamo podnabor vseh barv za ustvarjanje manjše barvne palete za generiranje barvnih shem, ki je na voljo tudi kot spremenljivke Sass in zemljevid Sass v scss/_variables.scss
datoteki Bootstrap.
Greys
Obsežen nabor sivih spremenljivk in zemljevid Sass scss/_variables.scss
za dosledne odtenke sive v vašem projektu. Upoštevajte, da so to "hladne sive", ki se nagibajo k subtilnemu modremu tonu, namesto nevtralnih sivin.
Znotraj scss/_variables.scss
boste našli Bootstrapove barvne spremenljivke in zemljevid Sass. Tukaj je primer $colors
zemljevida Sass:
$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;
Dodajte, odstranite ali spremenite vrednosti znotraj zemljevida, da posodobite, kako se uporabljajo v številnih drugih komponentah. Na žalost trenutno ne uporablja vsaka komponenta tega zemljevida Sass. Prihodnje posodobitve si bodo prizadevale to izboljšati. Do takrat načrtujte uporabo ${color}
spremenljivk in tega zemljevida Sass.
Komponente
Številne komponente in pripomočki Bootstrapa so zgrajeni z @each
zankami, ki ponavljajo zemljevid Sass. To je še posebej koristno za generiranje različic komponente z našimi $theme-colors
in ustvarjanje odzivnih različic za vsako prelomno točko. Ko prilagodite te zemljevide Sass in jih znova prevedete, boste samodejno videli, da se vaše spremembe odražajo v teh zankah.
Modifikatorji
Številne komponente Bootstrapa so zgrajene s pristopom razreda osnovnega modifikatorja. To pomeni, da je večina sloga vsebovana v osnovnem razredu (npr. .btn
), medtem ko so različice sloga omejene na razrede modifikatorjev (npr. .btn-danger
). Ti razredi modifikatorjev so zgrajeni iz $theme-colors
zemljevida za prilagoditev števila in imena naših razredov modifikatorjev.
Tukaj sta dva primera, kako preletimo $theme-colors
zemljevid, da ustvarimo modifikatorje za .alert
komponento in vse naše .bg-*
pripomočke v ozadju.
// 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);
}
Odzivna
Tudi te Sassove zanke niso omejene na barvne zemljevide. Ustvarite lahko tudi odzivne različice svojih komponent ali pripomočkov. Vzemimo za primer naše odzivne pripomočke za poravnavo besedila, kjer pomešamo @each
zanko za $grid-breakpoints
zemljevid Sass z vključevanjem medijske poizvedbe.
@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; }
}
}
Če bi morali spremeniti svoj $grid-breakpoints
, bodo vaše spremembe veljale za vse zanke, ki ponavljajo ta zemljevid.
spremenljivke CSS
Bootstrap 4 vključuje približno dva ducata lastnosti (spremenljivk) CSS po meri v svoj prevedeni CSS. Ti omogočajo enostaven dostop do običajno uporabljenih vrednosti, kot so naše barve teme, prelomne točke in primarni skladi pisav, ko delate v brskalniku Inspector, peskovniku kode ali splošnem izdelavi prototipov.
Razpoložljive spremenljivke
Tukaj so spremenljivke, ki jih vključimo (upoštevajte, da :root
je zahtevana). Nahajajo se v naši _root.scss
datoteki.
: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;
}
Primeri
Spremenljivke CSS ponujajo podobno prilagodljivost kot Sassove spremenljivke, vendar brez potrebe po prevajanju, preden se prikažejo brskalniku. Tukaj na primer ponastavljamo pisavo naše strani in sloge povezav s spremenljivkami CSS.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Spremenljivke prelomne točke
Medtem ko smo prvotno vključili prelomne točke v naše spremenljivke CSS (npr. --breakpoint-md
), te niso podprte v medijskih poizvedbah , vendar jih je še vedno mogoče uporabiti v nizih pravil v medijskih poizvedbah. Te spremenljivke prekinitvene točke ostanejo v prevedenem CSS zaradi združljivosti za nazaj, saj jih lahko uporablja JavaScript. Več o tem v specifikaciji .
Tukaj je primer, kaj ni podprto:
@media (min-width: var(--breakpoint-sm)) {
...
}
In tukaj je primer, kaj je podprto:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}