Source

Theming Bootstrap

Pèsonalize Bootstrap 4 ak nouvo varyab Sass entegre nou an 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 distdosye 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 dosye sous Sass nou yo pou pwofite varyab, kat, mixin, ak plis ankò.

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è pake, 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

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@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 yo ak kat nan custom.scss. Ou kapab tou kòmanse ajoute pati nan Bootstrap anba // Optionalseksyon an jan sa nesesè. Nou sijere pou w sèvi ak pil enpòte plen nan bootstrap.scssdosye nou an kòm pwen depa w.

Defo varyab

Chak varyab Sass nan Bootstrap 4 gen ladan !defaultdrapo 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 !defaultdrapo a. Si yon varyab deja te asiyen, Lè sa a, li pa pral re-asiyen pa valè yo default nan Bootstrap.

W ap jwenn lis konplè varyab Bootstrap yo nan scss/_variables.scss.

Chanjman varyab nan menm dosye Sass la ka vini anvan oswa apre varyab default yo. Sepandan, lè w pase sou pye sou dosye Sass yo, yo dwe pase ranvwa ou yo anvan ou enpòte dosye Sass Bootstrap yo.

Men yon egzanp ki chanje background-colorak colorpou <body>lè enpòte ak konpile Bootstrap atravè npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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 gen ladan !defaultdrapo a epi yo ka depase 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-colorskat 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 dangerkle soti nan $theme-colorspou 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-colorskat 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-colorskat 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`
}

Opsyon Sass

Pèsonalize Bootstrap 4 ak dosye varyab koutim 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 testjan sa nesesè.

Ou ka jwenn ak Customize varyab sa yo pou opsyon mondyal kle nan scss/_variables.scssdosye 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) oswa`false`	Pèmèt `border-radius`estil predefini sou divès eleman.
`$enable-shadows`	`true`oswa `false`(default)	Pèmèt `box-shadow`estil predefini sou divès eleman.
`$enable-gradients`	`true`oswa `false`(default)	Pèmèt gradyan predefini atravè `background-image`estil sou divès eleman.
`$enable-transitions`	`true`(default) oswa`false`	Pèmèt s predefini `transition`sou divès konpozan.
`$enable-hover-media-query`	`true`oswa `false`(default)	Depreche
`$enable-grid-classes`	`true`(default) oswa`false`	Pèmèt jenerasyon klas CSS pou sistèm kadriyaj la (egzanp, `.container`, `.row`, `.col-md-1`, elatriye).
`$enable-caret`	`true`(default) oswa`false`	Pèmèt pseudo eleman caret sou `.dropdown-toggle`.
`$enable-print-styles`	`true`(default) oswa`false`	Pèmèt estil pou optimize enprime.

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.scssdosye. 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.

Ble

Indigo

Koulè wouj violèt

Woz

Wouj

zoranj

Jòn

Vèt

Teal

Cyan

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 colorak background-color.

Nan tan kap vini an, nou pral vize bay kat Sass ak varyab pou tout koulè nan chak koulè jan nou te fè ak koulè gri ki anba a.

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.scssdosye Bootstraps la.

Prensipal

Segondè

Siksè

Danje

Avètisman

Info

Limyè

Fè nwa

Gri

Yon seri gwo varyab gri ak yon kat Sass nan scss/_variables.scsspou tout koulè gri ki konsistan atravè pwojè ou a.

100

200

300

400

500

600

700

800

900

Nan scss/_variables.scss, w ap jwenn varyab koulè Bootstrap ak kat Sass. Men yon egzanp $colorskat 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 @eachbouk ki repete sou yon kat Sass. Sa a itil espesyalman pou jenere variantes nan yon eleman pa nou yo $theme-colorsak 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-colorskat 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-colorskat jeyografik la jenere modifikatè nan .alerteleman 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 kote nou melanje yon @eachbouk pou $grid-breakpointskat 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è w la, yon sandbox kòd, oswa pwototip jeneral.

Varyab ki disponib

Isit la yo se varyab yo nou enkli (note ke :rootse obligatwa). Yo sitiye nan _root.scssdosye 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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 enkli pwen rupture nan varyab CSS nou yo (egzanp, --breakpoint-md), sa yo pa sipòte nan rekèt medya yo , men yo ka toujou itilize nan seri règ nan rekèt medya yo. Varyab pwen sa yo rete nan CSS konpile a pou konpatibilite bak, paske yo ka itilize pa JavaScript. Aprann plis nan espèk la.

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);
  }
}