Theming Bootstrap
Pèsonalize Bootstrap 4 ak nouvo varyab Sass entegre nou yo pou preferans style mondyal pou tèm ak chanjman konpozan fasil.
Entwodiksyon
Nan Bootstrap 3, tematik te lajman kondwi pa ranplasman varyab nan LESS, CSS koutim, ak yon fèy style tèm separe ke nou enkli nan dist
dosye nou yo. Avèk kèk efò, yon moun ka konplètman redesign gade nan Bootstrap 3 san yo pa manyen dosye debaz yo. Bootstrap 4 bay yon apwòch abitye, men yon ti kras diferan.
Koulye a, tèm yo akonpli pa varyab Sass, kat Sass, ak CSS koutim. Pa gen plis dedye stylesheet tèm; olye de sa, ou ka pèmèt tèm nan bati-an ajoute gradyan, lonbraj, ak plis ankò.
Sass
Sèvi ak fichye Sass sous nou yo pou pwofite varyab, kat, mixin, ak plis ankò lè w ap konpile Sass lè l sèvi avèk pwòp tiyo avantaj ou.
Estrikti dosye
Chak fwa sa posib, evite modifye dosye debaz Bootstrap yo. Pou Sass, sa vle di kreye pwòp stylesheet ou ki enpòte Bootstrap pou ou ka modifye ak pwolonje li. Si w ap itilize yon manadjè pake tankou npm, w ap gen yon estrikti dosye ki sanble sa a:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Si w te telechaje fichye sous nou yo epi w pa sèvi ak yon manadjè pakè, w ap vle konfigirasyon manyèlman yon bagay ki sanble ak estrikti sa a, kenbe dosye sous Bootstrap yo separe de pwòp ou yo.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Enpòte
Nan custom.scss
, ou pral enpòte dosye Sass sous Bootstrap yo. Ou gen de opsyon: enkli tout Bootstrap, oswa chwazi pati ou bezwen yo. Nou ankouraje lèt la, menm si ou dwe konnen gen kèk kondisyon ak depandans atravè eleman nou yo. W ap bezwen tou mete kèk JavaScript pou grefon nou yo.
// 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";
Avèk konfigirasyon sa a an plas, ou ka kòmanse modifye nenpòt nan varyab Sass ak kat nan custom.scss
. Ou kapab tou kòmanse ajoute pati nan Bootstrap anba // Optional
seksyon an jan sa nesesè. Nou sijere pou w sèvi ak pil enpòte plen nan bootstrap.scss
dosye nou an kòm pwen depa w.
Defo varyab
Chak varyab Sass nan Bootstrap gen ladan !default
drapo a ki pèmèt ou pase sou valè default varyab la nan pwòp Sass ou san yo pa modifye kòd sous Bootstrap la. Kopi epi kole varyab yo jan sa nesesè, modifye valè yo, epi retire !default
drapo a. Si yon varyab deja te asiyen, Lè sa a, li pa pral re-asiyen pa valè yo default nan Bootstrap.
Ou pral jwenn lis konplè varyab Bootstrap yo nan scss/_variables.scss
. Gen kèk varyab yo mete sou null
, varyab sa yo pa bay pwopriyete a sof si yo pase sou plas nan konfigirasyon ou a.
Chanjman varyab yo dwe vini apre yo fin enpòte fonksyon, varyab ak mixin nou yo, men anvan rès enpòtasyon yo.
Men yon egzanp ki chanje background-color
ak color
pou <body>
lè enpòte ak konpile Bootstrap atravè 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
Repete jan sa nesesè pou nenpòt varyab nan Bootstrap, ki gen ladan opsyon mondyal ki anba a.
Kat ak bouk
Bootstrap 4 gen ladan yon ti ponyen kat Sass, pè valè kle ki fè li pi fasil pou jenere fanmi CSS ki gen rapò. Nou itilize kat Sass pou koulè nou yo, pwen kadriyaj, ak plis ankò. Menm jan ak varyab Sass, tout kat Sass yo enkli !default
drapo a epi yo ka anile ak pwolonje.
Kèk nan kat Sass nou yo fizyone nan kat vid pa default. Sa a se fè pou pèmèt ekspansyon fasil nan yon kat Sass bay yo, men li vini nan pri pou fè retire atik nan yon kat jeyografik yon ti kras pi difisil.
Modifye kat jeyografik la
Pou modifye yon koulè ki deja egziste nan $theme-colors
kat jeyografik nou an, ajoute sa ki annapre yo nan dosye Sass koutim ou a:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Ajoute sou kat la
Pou ajoute yon nouvo koulè nan $theme-colors
, ajoute nouvo kle a ak valè:
$theme-colors: (
"custom-color": #900
);
Retire nan kat jeyografik la
Pou retire koulè nan $theme-colors
, oswa nenpòt lòt kat, itilize map-remove
. Ou dwe mete li ant kondisyon nou yo ak opsyon nou yo:
// 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";
...
Kle obligatwa
Bootstrap sipoze prezans kèk kle espesifik nan kat Sass jan nou itilize ak pwolonje sa yo tèt nou. Pandan w ap pèrsonalize kat yo enkli, ou ka rankontre erè kote yo te itilize yon kle kat Sass espesifik.
Pou egzanp, nou itilize primary
, success
, ak danger
kle soti nan $theme-colors
pou lyen, bouton, ak eta fòm yo. Ranplase valè kle sa yo pa ta dwe prezante okenn pwoblèm, men retire yo ka lakòz pwoblèm konpilasyon Sass. Nan ka sa yo, w ap bezwen modifye kòd Sass ki sèvi ak valè sa yo.
Fonksyon
Bootstrap itilize plizyè fonksyon Sass, men se sèlman yon ti gwoup ki aplikab pou tèm jeneral. Nou te enkli twa fonksyon pou jwenn valè nan kat koulè yo:
@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);
}
Sa yo pèmèt ou chwazi yon koulè nan yon kat Sass anpil tankou jan ou ta itilize yon varyab koulè soti nan v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Nou gen tou yon lòt fonksyon pou jwenn yon nivo patikilye nan koulè nan $theme-colors
kat la. Valè nivo negatif yo pral aleje koulè a, pandan y ap nivo ki pi wo yo pral fè nwa.
@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);
}
Nan pratik, ou ta rele fonksyon an epi pase nan de paramèt: non an nan koulè a soti nan $theme-colors
(egzanp, prensipal oswa danje) ak yon nivo nimerik.
.custom-element {
color: theme-color-level(primary, -10);
}
Fonksyon adisyonèl yo ta ka ajoute nan lavni an oswa pwòp Sass koutim ou a pou kreye fonksyon nivo pou kat Sass adisyonèl, oswa menm yon sèl jenerik si ou te vle gen plis detay.
Kontras koulè
Yon lòt fonksyon nou enkli nan Bootstrap se fonksyon kontras koulè a, color-yiq
. Li itilize espas koulè YIQ pou otomatikman retounen yon koulè kontras limyè ( #fff
) oswa nwa ( #111
) ki baze sou koulè baz espesifye a. Fonksyon sa a itil espesyalman pou mixin oswa bouk kote w ap jenere plizyè klas.
Pou egzanp, jenere echantiyon koulè nan $theme-colors
kat nou an:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Li kapab tou itilize pou bezwen kontras yon sèl:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Ou kapab tou presize yon koulè baz ak fonksyon kat koulè nou yo:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Chape anba SVG
Nou itilize escape-svg
fonksyon an pou chape anba <
, >
ak #
karaktè pou imaj background SVG. Karaktè sa yo bezwen chape pou byen rann imaj yo background nan IE. Lè w ap itilize escape-svg
fonksyon an, yo dwe site URI done yo.
Add ak Soustraksyon fonksyon
Nou itilize fonksyon yo add
ak subtract
pou vlope fonksyon CSS calc
la. Objektif prensipal fonksyon sa yo se pou evite erè lè 0
yo pase yon valè "unitless" nan yon calc
ekspresyon. Ekspresyon tankou calc(10px - 0)
ap retounen yon erè nan tout navigatè, malgre yo matematik kòrèk.
Egzanp kote kalkil la valab:
$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);
}
Egzanp kote kalkil la pa valab:
$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);
}
Opsyon Sass
Pèsonalize Bootstrap 4 ak dosye varyab koutim ki entegre nou an epi byen fasil chanje preferans CSS mondyal ak nouvo $enable-*
varyab Sass. Pase sou valè yon varyab epi rekonpile ak npm run test
jan sa nesesè.
Ou ka jwenn ak Customize varyab sa yo pou opsyon mondyal kle nan scss/_variables.scss
dosye Bootstrap la.
Varyab | Valè | Deskripsyon |
---|---|---|
$spacer |
1rem (default), oswa nenpòt ki valè > 0 |
Espesifye valè spacer default pou jenere sèvis piblik spacer nou yo . |
$enable-rounded |
true (default) oswafalse |
Pèmèt border-radius estil predefini sou divès eleman. |
$enable-shadows |
true oswa false (default) |
Pèmèt estil dekoratif predefini box-shadow sou divès eleman. Pa afekte box-shadow yo itilize pou eta konsantre. |
$enable-gradients |
true oswa false (default) |
Pèmèt gradyan predefini atravè background-image estil sou divès eleman. |
$enable-transitions |
true (default) oswafalse |
Pèmèt s predefini transition sou divès eleman. |
$enable-prefers-reduced-motion-media-query |
true (default) oswafalse |
Pèmèt prefers-reduced-motion rechèch medya a , ki siprime sèten animasyon/tranzisyon ki baze sou preferans navigatè itilizatè yo/sistèm operasyon yo. |
$enable-hover-media-query |
true oswa false (default) |
Depreche |
$enable-grid-classes |
true (default) oswafalse |
Pèmèt jenerasyon klas CSS pou sistèm kadriyaj la (egzanp, .container , .row , .col-md-1 , elatriye). |
$enable-caret |
true (default) oswafalse |
Pèmèt pseudo eleman caret sou .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (default) oswafalse |
Ajoute "men" kurseur nan eleman bouton ki pa andikape. |
$enable-print-styles |
true (default) oswafalse |
Pèmèt estil pou optimize enprime. |
$enable-responsive-font-sizes |
true oswa false (default) |
Pèmèt gwosè polis reponn . |
$enable-validation-icons |
true (default) oswafalse |
Pèmèt background-image ikon nan entrain tèks ak kèk fòm koutim pou eta validation. |
$enable-deprecation-messages |
true (default) oswafalse |
Mete sou false pou kache avètisman lè w ap itilize nenpòt nan mixin demode yo ak fonksyon ki planifye pou retire nan v5 . |
Koulè
Anpil nan divès konpozan ak sèvis piblik Bootstrap yo bati atravè yon seri koulè defini nan yon kat Sass. Kat sa a ka boukle sou nan Sass rapidman jenere yon seri règ.
Tout koulè
Tout koulè ki disponib nan Bootstrap 4, yo disponib kòm varyab Sass ak yon kat Sass nan scss/_variables.scss
dosye. Sa a pral elaji sou degaje minè ki vin apre yo ajoute tout koulè adisyonèl, anpil tankou palèt nan gri nou deja enkli.
Men ki jan ou ka itilize sa yo nan Sass ou a:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Koulè itilite klas yo disponib tou pou mete color
ak background-color
.
Koulè tèm
Nou itilize yon sou-ansanm tout koulè pou kreye yon palèt koulè ki pi piti pou jenere plan koulè, ki disponib tou kòm varyab Sass ak yon kat Sass nan scss/_variables.scss
dosye Bootstrap la.
Gri
Yon seri gwo varyab gri ak yon kat Sass nan scss/_variables.scss
pou tout koulè gri ki konsistan atravè pwojè ou a. Remake byen ke sa yo se "gri fre", ki gen tandans nan direksyon pou yon ton ble sibtil, olye ke gri net.
Nan scss/_variables.scss
, w ap jwenn varyab koulè Bootstrap ak kat Sass. Men yon egzanp $colors
kat Sass la:
$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;
Ajoute, retire oswa modifye valè nan kat la pou mete ajou fason yo itilize yo nan anpil lòt konpozan. Malerezman nan moman sa a, se pa tout eleman ki itilize kat Sass sa a. Mizajou nan lavni yo pral fè efò pou amelyore sa a. Jiska lè sa a, planifye pou sèvi ak ${color}
varyab yo ak kat Sass sa a.
Eleman
Anpil nan eleman ak sèvis piblik Bootstrap yo bati ak @each
bouk ki repete sou yon kat Sass. Sa a itil espesyalman pou jenere variantes nan yon eleman pa nou yo $theme-colors
ak kreye varyant reponn pou chak breakpoint. Pandan w ap pèrsonalize kat Sass sa yo epi w ap rekonpile, w ap otomatikman wè chanjman w yo reflete nan bouk sa yo.
Modifikatè
Anpil nan eleman Bootstrap yo bati ak yon apwòch klas baz modifikatè. Sa vle di ke gwo stil la genyen nan yon klas de baz (eg, .btn
) pandan ke varyasyon style yo limite nan klas modifye (eg, .btn-danger
). Klas modifikatè sa yo bati nan $theme-colors
kat jeyografik la pou fè pèsonalizasyon nimewo ak non klas modifikatè nou yo.
Isit la yo se de egzanp sou fason nou bouk sou $theme-colors
kat jeyografik la jenere modifikatè nan .alert
eleman an ak tout .bg-*
sèvis piblik background nou yo.
// 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);
}
Reponn
Sa yo bouk Sass yo pa limite a kat koulè, swa. Ou kapab tou jenere varyasyon reponn nan eleman ou oswa sèvis piblik yo. Pran pou egzanp sèvis piblik aliyman tèks reponn nou yo kote nou melanje yon @each
bouk pou $grid-breakpoints
kat jeyografik Sass la ak yon rechèch medya enkli.
@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; }
}
}
Si w ta bezwen modifye $grid-breakpoints
, chanjman ou yo pral aplike nan tout bouk yo ap repete sou kat sa a.
CSS varyab
Bootstrap 4 gen ladan anviwon de douzèn pwopriyete koutim CSS (varyab) nan CSS konpile li yo. Sa yo bay aksè fasil nan valè yo souvan itilize tankou koulè tèm nou yo, pwen breakpoints, ak pil font prensipal lè w ap travay nan Enspektè navigatè ou a, yon sandbox kòd, oswa pwototip jeneral.
Varyab ki disponib
Isit la yo se varyab yo nou enkli (note ke :root
se obligatwa). Yo sitiye nan _root.scss
dosye nou an.
: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;
}
Egzanp yo
Varyab CSS yo ofri menm jan fleksibilite ak varyab Sass yo, men san yo pa bezwen konpilasyon anvan yo sèvi nan navigatè a. Pou egzanp, isit la nou ap reset font paj nou an ak estil lyen ak varyab CSS.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Varyab Breakpoint
Byenke nou te okòmansman te enkli pwen rupture nan varyab CSS nou yo (egzanp, --breakpoint-md
), sa yo pa sipòte nan demann medya yo , men yo ka toujou itilize nan règleman yo nan demann medya yo. Varyab pwen sa yo rete nan CSS konpile a pou konpatibilite bak, paske yo ka itilize JavaScript. Aprann plis nan spesifikasyon an .
Men yon egzanp sou sa ki pa sipòte:
@media (min-width: var(--breakpoint-sm)) {
...
}
Ak isit la se yon egzanp sou sa ki sipòte:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}