Theming Bootstrap

Bootstrap 4-ê bi guhêrbarên Sass-ê yên nû-çêkirî re ji bo vebijarkên şêwaza gerdûnî ji bo guhertinên mijar û pêkhateyan hêsan bikin.

Pêşkêş

Di Bootstrap 3-ê de, mijar bi piranî ji hêla guhezbarên LESS, CSS-ya xwerû, û şêwazek mijarek cihêreng a ku me di distpelên xwe de vedihewand ve hatî rêve kirin. Bi hin hewildan re, meriv dikare bi tevahî dîmenê Bootstrap 3-ê ji nû ve dîzayn bike bêyî ku dest bi pelên bingehîn bike. Bootstrap 4 nêzîkatiyek naskirî, lê hinekî cûda peyda dike.

Naha, mijar ji hêla guherbarên Sass, nexşeyên Sass, û CSS-ya xwerû ve tête kirin. Bêhtir şêwazek mijarê ya diyarkirî tune; li şûna wê, hûn dikarin mijara çêkirî çalak bikin da ku gradient, sîwan, û hêj bêtir zêde bikin.

Sass

Pelên Sass-a çavkaniya me bikar bînin da ku dema ku Sass bi karanîna lûleya maliyeta xwe berhev dikin ji guhêrbar, nexşe, mixîn û hêj bêtir sûd werbigirin .

Struktura pelê

Kengê ku gengaz be, ji guhartina pelên bingehîn ên Bootstrap dûr bixin. Ji bo Sass, ev tê vê wateyê ku şêwaza xweya xweya ku Bootstrap îtxal dike biafirîne da ku hûn wê biguhezînin û dirêj bikin. Bihesibînin ku hûn rêveberek pakêtê ya mîna npm bikar tînin, hûn ê strukturek pelê ku bi vî rengî xuya dike hebe:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Ger we pelên çavkaniya me dakêşandibe û hûn rêveberek pakêtê bikar neynin, hûn ê bixwazin ku bi destan tiştek mîna wê strukturê saz bikin, pelên çavkaniyê yên Bootstrap ji yên xwe veqetînin.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importing

Di nav xwe custom.scssde, hûn ê pelên Sass-a çavkaniya Bootstrap-ê têxin hundur. Du vebijarkên we hene: Hemî Bootstrap têxin nav xwe, an jî parçeyên ku hûn hewce ne hilbijêrin. Em ya paşîn teşwîq dikin, her çend hay jê hebin ku di nav pêkhateyên me de hin hewcedarî û girêdan hene. Di heman demê de hûn ê hewce ne ku ji bo pêvekên me hin JavaScript jî têxin nav xwe.

// 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";

Bi wê sazkirinê re, hûn dikarin dest bi guheztina yek ji guhêrbar û nexşeyên Sass-ê li xwe bikin custom.scss. // OptionalHer weha hûn dikarin li gorî hewcedariyê dest bi lê zêdekirina beşên Bootstrap-ê li binê beşê bikin. Em pêşniyar dikin ku ji pelê me stûna tevahî importê bootstrap.scsswekî xala xweya destpêkê bikar bînin.

Vebijêrkên guherbar

Di Bootstrap de her guherbarek Sass alayek heye ku !defaultdihêle hûn nirxa xwerû ya guhêrbar di Sass-a xwe de biguhezînin bêyî ku koda çavkaniyê ya Bootstrap biguhezînin. Li gorî hewcedariyên guhêrbar kopî bikin û bipêçin, nirxên wan biguhezînin, û !defaultala rakin. Ger guhêrbarek berê hatî destnîşan kirin, wê hingê ew ê ji hêla nirxên xwerû yên di Bootstrap-ê de ji nû ve neyê destnîşankirin.

Hûn ê navnîşa bêkêmasî ya guhêrbarên Bootstrap di nav de bibînin scss/_variables.scss. Hin guhêrbar li ser hatine danîn null, ev guhêrbar heya ku di veavakirina we de neyên derbas kirin taybetmendiyê dernaxin.

Pêdivî ye ku guheztinên guhêrbar piştî ku fonksiyon, guhêrbar û mixînên me têne import kirin werin, lê berî hinardekirina mayî.

Li vir mînakek heye ku dema ku Bootstrap bi navgîniya npm ve tête û berhev dike background-colorû colorji bo-yê diguhezîne:<body>

@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

Ji bo her guherbarek li Bootstrap-ê, tevî vebijarkên gerdûnî yên li jêr, wekî ku hewce be dubare bikin.

Nexşe û xelek

Bootstrap 4 çend nexşeyên Sass, cotên nirxa sereke vedihewîne ku çêkirina malbatên CSS-ya têkildar hêsantir dike. Em nexşeyên Sass-ê ji bo rengên xwe, xalên şikestî, û hêj bêtir bikar tînin. Mîna guhêrbarên Sass, hemî nexşeyên Sass !defaultala dihewîne û dikare were rakirin û dirêj kirin.

Hin nexşeyên me yên Sassê ji hêla xwerû ve di nav yên vala de têne yek kirin. Ev tê kirin da ku rê bide berfirehkirina hêsan a nexşeyek Sass a diyarkirî, lê bi bihayê derxistina tiştan ji nexşeyê hinekî dijwartir tê.

Nexşeyê biguherîne

Ji bo guheztina rengek heyî di $theme-colorsnexşeya me de, jêrîn li pelê xweya Sass-a xwerû zêde bikin:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Li nexşeyê zêde bikin

Ji bo ku rengek nû $theme-colorslê zêde bike, mifteya nû û nirxê zêde bike:

$theme-colors: (
  "custom-color": #900
);

Ji nexşeyê rake

Ji bo rakirina rengan ji $theme-colors, an nexşeyek din, bikar bînin map-remove. Hişyar bin ku divê hûn wê têxin navbera daxwaz û vebijarkên me:

// 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";
...

Mifteyên pêwîst

Bootstrap hebûna hin bişkokên taybetî di nav nexşeyên Sass de destnîşan dike ji ber ku me van bixwe bikar aniye û dirêj dike. Gava ku hûn nexşeyên tê de xweş dikin, dibe ku hûn li cihê ku mifteya nexşeya Sass-ê ya taybetî tê bikar anîn bi xeletiyan re rû bi rû bibin.

Mînakî, em bişkokên primary, , successû dangerji $theme-colorsbo girêdan, bişkok û dewletên formê bikar tînin. Veguheztina nirxên van bişkojan divê pirsgirêk dernekeve, lê rakirina wan dibe ku bibe sedema pirsgirêkên berhevkirina Sass. Di van mînakan de, hûn ê hewce bikin ku koda Sass-ê ku van nirxan bikar tîne biguhezînin.

Functions

Bootstrap gelek fonksiyonên Sass bikar tîne, lê tenê binkeyek ji mijarên gelemperî re derbas dibe. Me sê fonksiyon ji bo wergirtina nirxan ji nexşeyên rengîn vedihewîne:

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

Vana dihêle hûn ji nexşeyek Sass yek reng hilbijêrin mîna ku hûn guhêrbarek rengîn ji v3 bikar bînin.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Di heman demê de fonksiyonek me ya din jî heye ku ji nexşeyê astek taybetî ya rengan bistînin. $theme-colorsNirxên asta neyînî dê reng ronî bike, lê astên bilind dê tarî bibin.

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

Di pratîkê de, hûn ê fonksiyonê bang bikin û di du pîvanan de derbas bikin: navê rengê ji $theme-colors(mînak, seretayî an xeternak) û astek jimareyî.

.custom-element {
  color: theme-color-level(primary, -10);
}

Fonksiyonên pêvek dikarin di pêşerojê de an Sass-a weya xwerû werin zêdekirin da ku fonksiyonên astê ji bo nexşeyên Sass-ê yên din biafirînin, an jî ger hûn bixwazin ku hûn bêtir biwêj bin, yekî gelemperî jî çêbikin.

Berevajî rengîn

Fonksiyonek din a ku em di Bootstrap de vedihewînin fonksiyona berevajiya rengîn e color-yiq,. Ew cîhê rengê YIQ bikar tîne da ku bixweber rengek berevajî ronahî ( #fff) an tarî ( #111) li ser bingeha rengê bingehîn a diyarkirî vegerîne. Ev fonksiyon bi taybetî ji bo mixîn an lûpên ku hûn çend çînan çêdikin bikêr e.

Mînakî, ji bo ku hûn ji $theme-colorsnexşeya me dîmenên rengîn çêbikin:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Di heman demê de ew dikare ji bo hewcedariyên berevajî yekcar were bikar anîn:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Her weha hûn dikarin bi fonksiyonên nexşeya rengên me re rengek bingehîn diyar bikin:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Escape SVG

Em escape-svgfonksiyonê bikar tînin da ku ji <, >û #karakteran ji bo wêneyên paşîn ên SVG birevin. Pêdivî ye ku van tîpan birevin da ku wêneyên paşîn di IE de bi rêkûpêk werin pêşkêş kirin. Dema ku escape-svgfonksiyonê bikar tînin, divê URI-yên daneyê bêne binav kirin.

Fonksiyonên lê zêdekirin û jêkirin

Em fonksiyonên addû bikar tînin da ku subtractfonksiyona CSS-ê calcbipêçin. Armanca bingehîn a van fonksîyonan ew e ku gava nirxek "bêyekanî" 0di nav biwêjekê de derbas bibe ji xeletiyan dûr bikevin calc. Gotinên mîna calc(10px - 0)dê di hemî gerokan de xeletiyek vegerînin, tevî ku ji hêla matematîkî ve rast in.

Mînaka ku calc derbasdar e:

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

Nimûne ku calc nederbasdar e:

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

Vebijarkên Sass

Bootstrap 4-ê bi pelê meya guhêrbarên xwerû yên çêkirî ve xweş bikin û bi guhêrbarên $enable-*Sass-ê yên nû ve tercîhên CSS-ya gerdûnî bi hêsanî veguherînin. Nirxa guhêrbarekê bişopînin û li npm run testgorî hewcedariyê ji nû ve berhev bikin.

Hûn dikarin van guherbaran ji bo vebijarkên gerdûnî yên sereke di scss/_variables.scsspelê Bootstrap de bibînin û xweş bikin.

Reng

Gelek hêman û karûbarên cihêreng ên Bootstrap bi rêzek rengên ku di nexşeyek Sass de hatine destnîşankirin têne çêkirin. Ev nexşe dikare li Sass-ê were veguheztin da ku zû rêzek rêziknameyan çêbike.

Hemû reng

Hemî rengên ku di Bootstrap 4 de hene, wekî guhêrbarên Sass û nexşeyek Sass di scss/_variables.scsspelê de hene. Ev ê di weşanên piçûk ên paşîn de were berfireh kirin da ku rengên din lê zêde bike, mîna paleta gewr ku em berê di nav xwe de digirin.

Li vir çawa hûn dikarin van di Sass-a xwe de bikar bînin:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Dersên bikêrhatî yên rengîn jî ji bo danîn colorû danînê background-colorhene.

Rengên mijarê

Em komek ji hemî rengan bikar tînin da ku ji bo afirandina nexşeyên rengan paleyek rengînek piçûktir biafirînin, di scss/_variables.scsspelê Bootstrap de wekî guhêrbarên Sass û nexşeyek Sass jî heye.

Greys

Komek berfereh ji guhêrbarên gewr û nexşeyek Sass scss/_variables.scssji bo rengên gewr ên domdar li seranserê projeya we. Bala xwe bidinê ku ev "gewrên sar" in, ku li şûna gewrên bêalî, ber bi tonek şîn a nazik ve diçin.

Di hundurê scss/_variables.scssde, hûn ê guhêrbarên rengîn ên Bootstrap û nexşeya Sass bibînin. Li vir mînakek $colorsnexşeya Sass heye:

$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;

Nirxên di nav nexşeyê de zêde bikin, jêbirin an biguhezînin da ku ew çawa di gelek pêkhateyên din de têne bikar anîn nûve bikin. Mixabin di vê demê de, ne her pêkhate vê nexşeya Sass bikar tîne. Nûvekirinên pêşerojê dê hewl bidin ku li ser vê çêtir bikin. Heya wê hingê, plan bikin ku hûn ${color}guhêrbar û vê nexşeya Sassê bikar bînin.

Components

Gelek hêman û karûbarên Bootstrap bi @eachlûpên ku li ser nexşeyek Sass dubare dikin têne çêkirin. Ev bi taybetî ji bo afirandina guhertoyên pêkhateyek ji hêla me ve $theme-colorsû afirandina guhertoyên bersivdar ji bo her xala veqetandinê arîkar e. Gava ku hûn van nexşeyên Sass-ê xweş bikin û ji nû ve berhev bikin, hûn ê bixweber guheztinên xwe yên ku di van lûkan de têne xuyang kirin bibînin.

Modifiers

Gelek hêmanên Bootstrap bi nêzîkatiyek çîna bingehîn-guhêrbar têne çêkirin. Ev tê vê wateyê ku piraniya şêwazê di çînek bingehîn de ye (mînak, .btn) dema ku guhertoyên şêwazê bi çînên guhêrbar (mînak, .btn-danger) ve têne sînordar kirin. Van çînên guhêrbar ji $theme-colorsnexşeyê têne çêkirin da ku hejmar û navê çînên me yên guhêrbar xweş bikin.

Li vir du mînak hene ku em çawa li $theme-colorsnexşeyê digerînin da ku guhezkeran li ser .alertpêkhate û hemî .bg-*karûbarên paşerojê biafirînin.

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

Pêrakirin

Van lûfên Sass bi nexşeyên rengîn re jî sînorkirî ne. Her weha hûn dikarin guhertoyên bersivdar ên pêkhate an karûbarên xwe biafirînin. Mînakî karûbarên hevrêzkirina nivîsa meya bersivdar bigirin ku em @eachji bo $grid-breakpointsnexşeya Sass xêzek bi pirsek medyayê re tê de tevlihev dikin.

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

Ger hewce be ku $grid-breakpointshûn guhertoya xwe biguhezînin, dê guhartinên we li hemî lûpên ku li ser wê nexşeyê dubare dibin bicîh bibin.

Guherbarên CSS

Bootstrap 4 di CSS-ya xweya berhevkirî de dora du dehan taybetmendiyên xwerû yên CSS (guhêrbar) vedihewîne. Dema ku di Inspectorê geroka we, sandboxek kodê, an prototîpkirina gelemperî de dixebitin, ev gihîştina nirxên gelemperî yên wekî rengên meya me, xalên veqetandinê, û stûnên tîpên bingehîn hêsan peyda dikin.

Guherbarên berdest

Li vir guhêrbarên ku em tê de ne (hişyar bikin ku :rootpêdivî ye). Ew di _root.scssdosyaya me de cih digirin.

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

Examples

Guherbarên CSS guhêrbarên Sass nermbûnek wekhev peyda dikin, lê bêyî ku hewcedariya berhevkirinê hebe berî ku ji gerokê re were pêşkêş kirin. Mînakî, li vir em tîpên rûpela xwe û şêwazên girêdanê bi guhêrbarên CSS-ê ji nû ve saz dikin.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Guherbarên xala veqetînê

Dema ku me bi eslê xwe de xalên veqetînê di nav guhêrbarên xwe yên CSS de (mînak, --breakpoint-md), ev di pirsên medyayê de nayên piştgirî kirin , lê dîsa jî dikarin di nav rêzikên di pirsên medyayê de werin bikar anîn. Van guhêrbarên xala veqetînê ji bo lihevhatina paşverû di CSS-ya berhevkirî de dimînin ji ber ku ew dikarin ji hêla JavaScript-ê ve werin bikar anîn. Di specê de bêtir fêr bibin .

Li vir mînakek tiştê ku nayê piştgirî kirin heye:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Û li vir mînakek ku piştgirî ye:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}