Source

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 hate rêve kirin. Bi hin hewildan re, meriv dikare bi tevahî dîmena 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 guhêrbarên Sass, nexşeyên Sass, û CSS-ya xwerû ve pêk tê. Bêhtir şêwazek mijarê ya diyarkirî tune; di şûna wê de, hûn dikarin mijara çêkirî çalak bikin da ku gradient, siya, û hêj bêtir zêde bikin.

Sass

Pelên Sass-a çavkaniya me bikar bînin da ku ji guhêrbar, nexşe, mixîn û hêj bêtir sûd werbigirin. Di avakirina xwe de me rastbûna dorpêçkirina Sass li 6 zêde kiriye (ji hêla xwerû ew 5 e) da ku pêşî li pirsgirêkên dorpêkirina gerokê bigire.

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

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

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 4-ê de her guherbarek Sass alayek heye ku !defaultdihêle hûn nirxa xwerû ya guhêrbar di Sass-a xwe de derbas bikin 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.

Veguheztinên guhêrbar di nav heman pelê Sass de dikarin berî an piştî guhêrbarên xwerû werin. Lêbelê, dema ku li ser pelên Sass-ê bihurînin, divê pêşîya we were berî ku hûn pelên Sass-ê yên Bootstrap têxin.

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>

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

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

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 devkî 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.

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.

Têgûherr	Nirxên	Terîf
`$spacer`	`1rem`(defall), an nirxek > 0	Nirxa cihêkerê ya xwerû diyar dike da ku bi bernamekî karûbarên meya spacer çêbike .
`$enable-rounded`	`true`(default) an`false`	`border-radius`Li ser pêkhateyên cihêreng şêwazên pêşwextkirî çalak dike.
`$enable-shadows`	`true`an `false`(pêşniyaz)	`box-shadow`Li ser pêkhateyên cihêreng şêwazên pêşwextkirî çalak dike.
`$enable-gradients`	`true`an `false`(pêşniyaz)	`background-image`Bi şêwazên li ser pêkhateyên cihêreng, gradientên pêşwextkirî çalak dike.
`$enable-transitions`	`true`(default) an`false`	Li ser hêmanên cihê s-yên pêşwextkirî çalak `transition`dike.
`$enable-prefers-reduced-motion-media-query`	`true`(default) an`false`	Lêpirsîna `prefers-reduced-motion`medyayê çalak dike , ku hin anîmasyon/veguhertinan li ser bingeha bijareyên geroka bikarhêner/pergala xebitandinê ditepisîne.
`$enable-hover-media-query`	`true`an `false`(pêşniyaz)	Deprecated
`$enable-grid-classes`	`true`(default) an`false`	Hilberîna çînên CSS-ê ji bo pergala torê çalak dike (mînak, `.container`, `.row`, `.col-md-1`, hwd.).
`$enable-caret`	`true`(default) an`false`	Vebijêrkek pseudo elementê li ser çalak dike `.dropdown-toggle`.
`$enable-pointer-cursor-for-buttons`	`true`(default) an`false`	Kursora "dest" li hêmanên bişkojka neçalakkirî zêde bikin.
`$enable-print-styles`	`true`(default) an`false`	Şêweyan ji bo xweşbînkirina çapkirinê çalak dike.
`$enable-responsive-font-sizes`	`true`an `false`(pêşniyaz)	Mezinahiyên tîpên bersivdar çalak dike.
`$enable-validation-icons`	`true`(default) an`false`	Ji bo dewletên erêkirinê îkonên `background-image`di nav têketinên nivîsê û hin formên xwerû de çalak dike.
`$enable-deprecation-messages`	`true`an `false`(pêşniyaz)	Ji bo `true`ku gava yek ji mîksîn û fonksiyonên ku hatine plan kirin ku di nav de werin rakirin têne bikar anîn de hişyariyan destnîşan bikin `v5`.

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.

Şîn

Indigo

Mor

Pembe

Sor

Porteqalî

Zer

Kesk

Teal

Cyan

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.

Di pêşerojê de, em ê armanc bikin ku nexşe û guhêrbarên Sass ji bo rengên her rengî peyda bikin wekî ku me bi rengên gewr ên li jêr kiriye.

Rengên mijarê

Em komek ji hemî rengan bikar tînin da ku ji bo hilberîna 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î peyda dibin.

Bingehîn

Dûwemdor

Serketinî

Talûke

Gazî

Info

Sivik

Tarî

Greys

Komek berfireh a 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.

100

200

300

400

500

600

700

800

900

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 gihandina 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", 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 veqetandinê di nav guhêrbarên xwe yên CSS-ê de vedihewand (mînak, --breakpoint-md), ev di pirsên medyayê de nayên piştgirî kirin , lê dîsa jî ew dikarin di nav rêzikên di pirsên medyayê de werin bikar anîn. Van guhêrbarên xala veqetînê di CSS-ya berhevkirî de dimînin ji bo lihevhatina paşdemayî 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);
  }
}