Theming Bootstrap
Tinkinkite „Bootstrap 4“ naudodami mūsų naujus integruotus „Sass“ kintamuosius, kad gautumėte visuotines stiliaus nuostatas, kad būtų lengviau nustatyti temas ir keisti komponentus.
Įvadas
„Bootstrap 3“ temą daugiausia lėmė kintamųjų nepaisymas LESS, tinkintas CSS ir atskiras temos stiliaus lapas, kurį įtraukėme į savo dist
failus. Įdėjus tam tikrų pastangų, būtų galima visiškai pakeisti „Bootstrap 3“ išvaizdą nepaliečiant pagrindinių failų. „Bootstrap 4“ siūlo pažįstamą, bet šiek tiek kitokį požiūrį.
Dabar tematika atliekama naudojant Sass kintamuosius, Sass žemėlapius ir tinkintą CSS. Nėra daugiau specialios temos stiliaus lapo; vietoj to galite įjungti įtaisytąją temą, kad pridėtumėte gradientus, šešėlius ir kt.
Sass
Pasinaudokite mūsų šaltinio Sass failais, kad pasinaudotumėte kintamųjų, žemėlapių, mišinių ir kt. pranašumais, kai kompiliuojate Sass naudodami savo išteklių vamzdyną.
Failo struktūra
Kai tik įmanoma, nekeiskite pagrindinių „Bootstrap“ failų. „Sass“ tai reiškia, kad reikia sukurti savo stiliaus lapą, kuris importuoja „Bootstrap“, kad galėtumėte jį modifikuoti ir išplėsti. Darant prielaidą, kad naudojate paketų tvarkyklę, pvz., npm, failo struktūra atrodys taip:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Jei atsisiuntėte mūsų šaltinio failus ir nenaudojate paketų tvarkyklės, norėsite rankiniu būdu nustatyti kažką panašaus į tą struktūrą, atskirdami Bootstrap šaltinio failus nuo savo.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importuojama
Į savo custom.scss
, importuosite Bootstrap šaltinio Sass failus. Turite dvi parinktis: įtraukti visą „Bootstrap“ arba pasirinkti reikalingas dalis. Mes skatiname pastarąjį, nors atminkite, kad mūsų komponentams yra tam tikrų reikalavimų ir priklausomybių. Taip pat turėsite įtraukti šiek tiek „JavaScript“ į mūsų papildinius.
// 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";
Sukūrę šią sąranką, galite pradėti keisti bet kuriuos Sass kintamuosius ir žemėlapius savo custom.scss
. Taip pat galite pradėti pridėti „Bootstrap“ dalis po // Optional
skyriumi, jei reikia. bootstrap.scss
Kaip išeities tašką siūlome naudoti visą importavimo krūvą iš mūsų failo.
Kintamieji numatytieji nustatymai
Kiekvienas Bootstrap Sass kintamasis turi !default
vėliavėlę, leidžiančią nepaisyti numatytosios kintamojo reikšmės savo Sass nekeičiant Bootstrap šaltinio kodo. Jei reikia, nukopijuokite ir įklijuokite kintamuosius, pakeiskite jų reikšmes ir pašalinkite !default
vėliavėlę. Jei kintamasis jau buvo priskirtas, jis nebus iš naujo priskirtas pagal numatytąsias „Bootstrap“ reikšmes.
Visą „Bootstrap“ kintamųjų sąrašą rasite scss/_variables.scss
. Kai kurie kintamieji nustatyti į null
, šie kintamieji nepateikia nuosavybės, nebent jūsų konfigūracijoje jų nepaisoma.
Kintamųjų nepaisymas turi būti atliktas po to, kai importuojamos mūsų funkcijos, kintamieji ir mišiniai, bet prieš likusį importavimą.
Štai pavyzdys, kuris pakeičia background-color
ir color
, <body>
kai importuojamas ir kompiliuojamas Bootstrap per 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
Pakartokite, jei reikia, naudodami bet kurį „Bootstrap“ kintamąjį, įskaitant toliau pateiktas visuotines parinktis.
Žemėlapiai ir kilpos
„Bootstrap 4“ apima keletą „Sass“ žemėlapių, pagrindinių reikšmių porų, kurios palengvina susijusių CSS šeimų generavimą. Savo spalvoms, tinklelio lūžio taškams ir kt. naudojame Sass žemėlapius. Kaip ir Sass kintamieji, visuose Sass žemėlapiuose yra !default
vėliavėlė ir juos galima nepaisyti bei išplėsti.
Kai kurie mūsų Sass žemėlapiai pagal numatytuosius nustatymus yra sujungti į tuščius. Tai daroma tam, kad būtų galima lengvai išplėsti tam tikrą Sass žemėlapį, tačiau dėl to elementų pašalinimas iš žemėlapio yra šiek tiek sudėtingesnis.
Keisti žemėlapį
Norėdami modifikuoti esamą spalvą mūsų $theme-colors
žemėlapyje, į savo pasirinktinį Sass failą pridėkite:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Pridėti į žemėlapį
Norėdami pridėti naują spalvą $theme-colors
, pridėkite naują raktą ir reikšmę:
$theme-colors: (
"custom-color": #900
);
Pašalinti iš žemėlapio
Norėdami pašalinti spalvas iš $theme-colors
ar bet kurio kito žemėlapio, naudokite map-remove
. Atminkite, kad jį turite įrašyti tarp mūsų reikalavimų ir parinkčių:
// 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";
...
Reikalingi raktai
„Bootstrap“ daro prielaidą, kad „Sass“ žemėlapiuose yra tam tikrų specifinių raktų, kuriuos naudojome ir išplėtėme patys. Kai tinkinate įtrauktus žemėlapius, galite susidurti su klaidomis, kai naudojamas konkretus Sass žemėlapio raktas.
Pavyzdžiui, nuorodoms, mygtukams ir formų būsenoms naudojame klavišus , primary
ir success
. Pakeitus šių raktų reikšmes neturėtų kilti problemų, tačiau jas pašalinus gali kilti Sass kompiliavimo problemų. Tokiais atvejais turėsite modifikuoti Sass kodą, kuris naudoja šias reikšmes.danger
$theme-colors
Funkcijos
„Bootstrap“ naudoja kelias „Sass“ funkcijas, tačiau tik poaibis taikomas bendrai temai. Mes įtraukėme tris funkcijas, kad gautume reikšmes iš spalvų žemėlapių:
@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);
}
Tai leidžia pasirinkti vieną spalvą iš Sass žemėlapio, panašiai kaip naudotumėte spalvų kintamąjį iš v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Taip pat turime dar vieną funkciją, leidžiančią gauti tam tikrą spalvų lygį iš $theme-colors
žemėlapio. Neigiamos lygio reikšmės pašviesins spalvą, o aukštesnės – patamsės.
@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);
}
Praktiškai iškviečiate funkciją ir perduodate du parametrus: spalvos pavadinimą $theme-colors
(pvz., pirminis arba pavojus) ir skaitinį lygį.
.custom-element {
color: theme-color-level(primary, -10);
}
Ateityje gali būti pridėtos papildomos funkcijos arba jūsų pasirinktas Sass, kad būtų sukurtos papildomos Sass žemėlapių lygio funkcijos arba net bendrosios funkcijos, jei norite būti išsamesni.
Spalvų kontrastas
Papildoma funkcija, kurią įtraukiame į „Bootstrap“, yra spalvų kontrasto funkcija color-yiq
. Ji naudoja YIQ spalvų erdvę , kad automatiškai grąžintų šviesią ( #fff
) arba tamsią ( #111
) kontrasto spalvą pagal nurodytą bazinę spalvą. Ši funkcija ypač naudinga mišinukams ar ciklams, kuriuose generuojate kelias klases.
Pavyzdžiui, norėdami sugeneruoti spalvų pavyzdžius iš mūsų $theme-colors
žemėlapio:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Jis taip pat gali būti naudojamas vienkartiniams kontrasto poreikiams:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Taip pat galite nurodyti pagrindinę spalvą naudodami mūsų spalvų žemėlapio funkcijas:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Pabėgti nuo SVG
SVG fono vaizdams naudojame escape-svg
funkciją, kad išvengtume <
, >
ir simbolių. #
Norint tinkamai pateikti fono paveikslėlius IE, šiuos simbolius reikia pakeisti. Naudojant escape-svg
funkciją, duomenų URI turi būti cituojami.
Pridėti ir atimti funkcijos
CSS funkcijai apvynioti naudojame ir add
funkcijas . Pagrindinis šių funkcijų tikslas yra išvengti klaidų, kai į išraišką perduodama „be vieneto“ reikšmė . Tokios išraiškos kaip pateiks klaidą visose naršyklėse, nepaisant to, kad yra matematiškai teisingos.subtract
calc
0
calc
calc(10px - 0)
Pavyzdys, kur skaičiavimas galioja:
$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);
}
Pavyzdys, kai skaičiavimas neteisingas:
$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 variantai
Tinkinkite „Bootstrap 4“ naudodami mūsų integruotą tinkintų kintamųjų failą ir lengvai perjunkite visuotines CSS nuostatas naudodami naujus „ $enable-*
Sass“ kintamuosius. Nepaisykite kintamojo reikšmės ir, npm run test
jei reikia, iš naujo sukompiliuokite.
Šiuos kintamuosius galite rasti ir pritaikyti pagrindinėms visuotinėms parinktims „Bootstrap“ scss/_variables.scss
faile.
Kintamasis | Vertybės | apibūdinimas |
---|---|---|
$spacer |
1rem (numatytasis) arba bet kokia reikšmė > 0 |
Nurodoma numatytoji tarpiklio reikšmė, skirta programiškai generuoti mūsų tarpiklio priemones . |
$enable-rounded |
true (numatytasis) arbafalse |
Įgalina iš anksto nustatytus border-radius įvairių komponentų stilius. |
$enable-shadows |
true arba false (numatytasis) |
Įgalina iš anksto nustatytus box-shadow įvairių komponentų dekoratyvinius stilius. Neturi įtakos box-shadow fokusavimo būsenoms. |
$enable-gradients |
true arba false (numatytasis) |
Įgalinami iš anksto nustatyti gradientai naudojant background-image įvairių komponentų stilius. |
$enable-transitions |
true (numatytasis) arbafalse |
Įgalina iš anksto nustatytus transition s įvairiuose komponentuose. |
$enable-prefers-reduced-motion-media-query |
true (numatytasis) arbafalse |
Įgalina prefers-reduced-motion medijos užklausą , kuri slopina tam tikras animacijas / perėjimus pagal naudotojų naršyklės / operacinės sistemos nuostatas. |
$enable-hover-media-query |
true arba false (numatytasis) |
Nebenaudojama |
$enable-grid-classes |
true (numatytasis) arbafalse |
Įgalinamas tinklelio sistemos CSS klasių generavimas (pvz., .container , .row , .col-md-1 , ir kt.). |
$enable-caret |
true (numatytasis) arbafalse |
Įgalinamas pseudo elementas caret on .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (numatytasis) arbafalse |
Pridėkite „rankos“ žymeklį prie neišjungtų mygtukų elementų. |
$enable-print-styles |
true (numatytasis) arbafalse |
Įgalinami stiliai optimizuojant spausdinimą. |
$enable-responsive-font-sizes |
true arba false (numatytasis) |
Įgalinami reaguojantys šriftų dydžiai . |
$enable-validation-icons |
true (numatytasis) arbafalse |
Įgalina background-image piktogramas teksto įvestyje ir kai kurias pasirinktines patvirtinimo būsenų formas. |
$enable-deprecation-messages |
true (numatytasis) arbafalse |
Nustatykite, false kad paslėptumėte įspėjimus, kai naudojate bet kurį iš nebenaudojamų mišinių ir funkcijų, kurias planuojama pašalinti v5 . |
Spalva
Daugelis įvairių „Bootstrap“ komponentų ir paslaugų yra sukurti naudojant spalvų seriją, apibrėžtą „Sass“ žemėlapyje. Šį žemėlapį galima perjungti Sass, kad būtų galima greitai sugeneruoti taisyklių rinkinius.
Visos spalvos
Visos Bootstrap 4 spalvos galimos kaip Sass kintamieji ir Sass žemėlapis scss/_variables.scss
faile. Tai bus išplėsta kituose nedideliuose leidimuose, kad būtų pridėta papildomų atspalvių, panašiai kaip jau įtraukta pilkų atspalvių paletė .
Štai kaip galite juos naudoti savo „Sass“:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Taip pat galimos spalvų naudingumo klasės nustatymui color
ir background-color
.
Temos spalvos
Naudojame visų spalvų poaibį, kad sukurtume mažesnę spalvų paletę spalvų schemoms generuoti, taip pat kaip Sass kintamieji ir Sass žemėlapis Bootstrap scss/_variables.scss
faile.
Pilkos spalvos
Platus pilkų kintamųjų rinkinys ir Sass žemėlapis, scss/_variables.scss
kad jūsų projekte būtų vienodi pilki atspalviai. Atkreipkite dėmesį, kad tai yra „vėsios pilkos spalvos“, kurios linkusios į subtilų mėlyną atspalvį, o ne į neutralias pilkas spalvas.
scss/_variables.scss
Svetainėje rasite „Bootstrap“ spalvų kintamuosius ir „Sass“ žemėlapį . $colors
Štai Sass žemėlapio pavyzdys :
$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;
Pridėkite, pašalinkite arba keiskite reikšmes žemėlapyje, kad atnaujintumėte, kaip jos naudojamos daugelyje kitų komponentų. Deja, šiuo metu ne kiekvienas komponentas naudoja šį Sass žemėlapį. Būsimi atnaujinimai stengsis tai pagerinti. Iki tol planuokite naudotis ${color}
kintamaisiais ir šiuo Sass žemėlapiu.
Komponentai
Daugelis „Bootstrap“ komponentų ir paslaugų yra sukurti naudojant @each
kilpas, kurios kartojasi per Sass žemėlapį. Tai ypač naudinga generuojant mūsų komponento $theme-colors
variantus ir kuriant reaguojančius variantus kiekvienam pertraukos taškui. Kai tinkinate šiuos Sass žemėlapius ir iš naujo kompiliuojate, automatiškai matysite pakeitimus, kurie atsispindės šiose kilpose.
Modifikatoriai
Daugelis „Bootstrap“ komponentų yra sukurti naudojant bazinio modifikatoriaus klasės metodą. Tai reiškia, kad didžioji stiliaus dalis yra pagrindinėje klasėje (pvz., .btn
), o stiliaus variantai apsiriboja modifikavimo klasėmis (pvz., .btn-danger
). Šios modifikavimo klasės sukurtos iš $theme-colors
žemėlapio, kad būtų galima tinkinti mūsų modifikatorių klasių skaičių ir pavadinimą.
Čia pateikiami du pavyzdžiai, kaip apjungiame $theme-colors
žemėlapį, kad sugeneruotume .alert
komponento ir visų mūsų .bg-*
foninių paslaugų modifikatorius.
// 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);
}
Atsakingas
Šios Sass kilpos taip pat neapsiriboja spalvų žemėlapiais. Taip pat galite sukurti reaguojančius komponentų ar paslaugų variantus. Paimkite, pavyzdžiui, mūsų reaguojančias teksto lygiavimo priemones, kuriose sumaišome Sass žemėlapio @each
kilpą $grid-breakpoints
su medijos užklausa.
@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; }
}
}
Jei jums reikės pakeisti savo $grid-breakpoints
, jūsų pakeitimai bus taikomi visoms kilpoms, kartojančioms tą žemėlapį.
CSS kintamieji
„ Bootstrap 4“ savo sudarytoje CSS apima maždaug dvi dešimtis tinkintų CSS ypatybių (kintamųjų) . Tai suteikia lengvą prieigą prie dažniausiai naudojamų reikšmių, pvz., temų spalvų, pertraukos taškų ir pagrindinių šriftų krūvų, kai dirbate su naršyklės inspektoriumi, kodo smėlio dėže ar kuriant bendrą prototipą.
Galimi kintamieji
Čia yra kintamieji, kuriuos įtraukiame (atkreipkite dėmesį, kad :root
būtina). Jie yra mūsų _root.scss
byloje.
: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;
}
Pavyzdžiai
CSS kintamieji siūlo panašų lankstumą kaip ir Sass kintamieji, tačiau jų nereikia kompiliuoti prieš pateikiant juos naršyklei. Pavyzdžiui, čia iš naujo nustatome savo puslapio šriftą ir nuorodų stilius naudodami CSS kintamuosius.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Lūžio taško kintamieji
Nors iš pradžių įtraukėme lūžio taškus į savo CSS kintamuosius (pvz., --breakpoint-md
), jie nepalaikomi medijos užklausose , tačiau juos vis tiek galima naudoti medijos užklausų taisyklių rinkiniuose. Šie lūžio taško kintamieji lieka kompiliuotame CSS, kad būtų galima suderinti atgal, nes juos gali naudoti „JavaScript“. Sužinokite daugiau specifikacijoje .
Štai pavyzdys, kas nepalaikoma:
@media (min-width: var(--breakpoint-sm)) {
...
}
Ir štai pavyzdys, kas palaikoma:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}