Sehlogo sa Bootstrap

Tlwaetša Bootstrap 4 ka diphetogo tša rena tše mpsha tša Sass tše di agetšwego ka gare bakeng sa dikgetho tša setaele sa lefase ka bophara bakeng sa go beakanya sehlogo le diphetogo tša dikarolo tše bonolo.

Matseno

Ka Bootstrap 3, theming e be e laolwa kudu ke go tlošwa ga diphetogo ka go LESS, CSS ya tlwaelo, le letlakala la setaele la sehlogo leo le arogilego leo re le akaretšago ka distdifaeleng tša rena. Ka boiteko bjo itšego, motho o be a ka hlama lefsa ka mo go feletšego ponagalo ya Bootstrap 3 ntle le go kgoma difaele tša motheo. Bootstrap 4 e fana ka mokgwa o tlwaelehileng, empa o fapaneng hanyenyane.

Bjale, theming e phethwa ke diphetogo tša Sass, dimmapa tša Sass, le CSS ya tlwaelo. Ga go sa na letlakala la setaele la sehlogo leo le ineetšego; go e ​​na le moo, o ka kgontšha sehlogo seo se agetšwego ka gare go oketša dikelo, meriti le tše dingwe.

Sass

Diriša difaele tša rena tša mohlodi tša Sass go diriša diphetogo, dimmapa, mixins, le tše dingwe. Ka go aga ga rena re okeditše go nepagala ga go dikologa ga Sass go fihla go 6 (ka go ikemela ke 5) go thibela ditaba ka go dikološa ga sephephediši.

Sebopego sa faele

Nako le nako ge go kgonega, phema go fetoša difaele tša motheo tša Bootstrap. Go Sass, seo se ra gore o hlama letlakala la gago la setaele leo le tsenyago Bootstrap ka ntle gore o kgone go le fetoša le go le katološa. Ge re tšea gore o šomiša molaodi wa sephuthelwana go swana le npm, o tla ba le sebopego sa faele seo se swanago le se:

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

Ge e ba o taoneloute difaele tša rena tša mothopo gomme o sa šomiše molaodi wa sephuthelwana, o tla nyaka go beakanya ka seatla selo se sengwe se se swanago le sebopego seo, o boloka difaele tša mothopo tša Bootstrap di arogile go tša gago.

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

Go tsenya ka ntle

Ka go ya gago custom.scss, o tla import Bootstrap ya mohlodi Sass difaele. O na le dikgetho tše pedi: akaretša ka moka ga Bootstrap, goba o kgethe dikarolo tšeo o di hlokago. Re hlohleletša tša mafelelo, le ge e le gore ela hloko gore go na le dinyakwa tše dingwe le go ithekga go ralala le dikarolo tša rena. Gape o tla swanelwa ke go akaretša JavaScript e itšego bakeng sa di-plugin tša rena.

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

Ka peakanyo yeo e le gona, o ka thoma go fetoša efe goba efe ya diphetogo tša Sass le dimmapa ka go custom.scss. O ka thoma gape go oketša dikarolo tša Bootstrap ka fase ga // Optionalkarolo ge go nyakega. Re šišinya go šomiša mokgobo wa go tsenya ka botlalo go tšwa go bootstrap.scssfaele ya rena bjalo ka ntlha ya gago ya mathomo.

Di-default tše di fetogago

Phetogo ye nngwe le ye nngwe ya Sass go Bootstrap 4 e akaretša !defaultfolaga yeo e go dumelelago go tloša boleng bja go se fetoge bja phetogo ka go Sass ya gago ntle le go fetoša khoutu ya mohlodi ya Bootstrap. Kopiša le go kgomaretša diphetogo ka moo go nyakegago, fetoša boleng bja tšona, gomme o tloše !defaultfolaga. Ge e le gore phetogo e šetše e abetšwe, gona e ka se abelwe gape ke dikelo tša go se fetoge ka go Bootstrap.

O tla hwetša lenaneo le le feletšego la diphetogo tša Bootstrap go scss/_variables.scss.

Diphetogo go tlošwa ka gare ga faele ye e swanago ya Sass di ka tla pele goba ka morago ga diphetogo tša go se fetoge. Le ge go le bjalo, ge o tloša go ralala le difaele tša Sass, go tloša ga gago go swanetše go tla pele o tsenya difaele tša Sass tša Bootstrap.

Mona ke mohlala wo o fetošago background-colorle colorbakeng sa <body>ge o tsenya ka ntle le go kgoboketša Bootstrap ka npm:

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

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

Boeletša ka moo go nyakegago bakeng sa phetogo efe goba efe go Bootstrap, go akaretša le dikgetho tša lefase ka bophara ka mo tlase.

Dimmapa le diloupu

Bootstrap 4 e akaretša dimmapa tše mmalwa tša Sass, dipara tša boleng bja senotlelo tšeo di dirago gore go be bonolo go tšweletša malapa a CSS ye e amanago. Re šomiša dimmapa tša Sass bakeng sa mebala ya rena, mafelo a go kgaotša keriti, le tše dingwe. Go swana le diphetogo tša Sass, dimmapa ka moka tša Sass di akaretša !defaultfolaga gomme di ka tlošwa le go katološwa.

Tše dingwe tša dimmapa tša rena tša Sass di kopantšwe go ba tše di se nago selo ka go ikemela. Se se dirwa go dumelela katološo ye bonolo ya mmapa wa Sass wo o filwego, eupša se tla ka ditshenyagalelo tša go dira gore go tloša dilo mmapeng go be thata go se nene.

Fetoša mmapa

Go fetoša mmala wo o lego gona $theme-colorsmmapeng wa rena, oketša tše di latelago go faele ya gago ya tlwaelo ya Sass:

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

Oketša go mmapa

Go oketša mmala o mofsa go $theme-colors, oketša senotlelo se sefsa le boleng:

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

Tlosa go tšwa mmapeng

Go tloša mebala go tšwa go $theme-colors, goba mmapa ofe goba ofe o mongwe, diriša map-remove. Hlokomela gore o swanetše go e tsenya magareng ga dinyakwa tša rena le dikgetho:

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

Dinotlelo tše di nyakegago

Bootstrap e tšea go ba gona ga dinotlelo tše dingwe tše di itšego ka gare ga dimmapa tša Sass ge re dutše re diriša le go katološa tše ka borena. Ge o dutše o tlwaetša dimmapa tše di akareditšwego, o ka kopana le diphošo moo senotlelo se itšego sa mmapa wa Sass se dirišwago gona.

Go fa mohlala, re šomiša primary, success, le dangerdinotlelo go tšwa $theme-colorsgo dikgokagano, dikonope, le maemo a foromo. Go tšeela legato dikelo tša dinotlelo tše ga se gwa swanela go tšweletša ditaba, eupša go di tloša go ka hlola ditaba tša kgoboketšo ya Sass. Maemong a, o tla swanelwa ke go fetoša khoutu ya Sass yeo e dirišago dikelo tšeo.

Mešomo

Bootstrap e šomiša mešomo ye mmalwa ya Sass, eupša ke sehlopha se senyenyane fela seo se šomago go theming ya kakaretšo. Re akareditše mešomo ye meraro ya go hwetša dikelo go tšwa go mebapa ya mebala:

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

Tše di go dumelela go kgetha mmala o tee go tšwa mmapeng wa Sass go swana kudu le ka fao o bego o tla šomiša phetogo ya mmala go tšwa go v3.

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

Re bile re na le mošomo o mongwe wa go hwetša maemo a itšego a mmala go tšwa $theme-colorsmmapeng. Ditekanyetšo tša maemo a mabe di tla bofefofatša mmala, mola maemo a godimo a tla fifala.

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

Ka go diragatša, o be o tla bitša mošomo gomme wa feta ka ditekanyetšo tše pedi: leina la mmala go tšwa go $theme-colors(mohlala, ya mathomo goba kotsi) le maemo a dipalo.

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

Mešomo ya tlaleletšo e ka okeletšwa nakong ye e tlago goba Sass ya gago ya tlwaelo go hlama mešomo ya maemo bakeng sa mebapa ya tlaleletšo ya Sass, goba gaešita le ya kakaretšo ge e ba o be o nyaka go ba le verbose kudu.

Phapano ya mebala

Mošomo o tee wa tlaleletšo wo re o akaretšago go Bootstrap ke mošomo wa go fapantšha mebala, color-yiq. E diriša sebaka sa mmala sa YIQ go bušetša ka go iketla mmala wa phapano wa seetša ( #fff) goba o lefsifsi ( #111) wo o theilwego godimo ga mmala wa motheo wo o laeditšwego. Mošomo wo o na le mohola kudu go di-mixin goba diloupu moo o tšweletšago diklase tše dintši.

Ka mohlala, go tšweletša di-swatch tša mebala go tšwa $theme-colorsmmapeng wa rena:

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

E ka dirišwa gape bakeng sa dinyakwa tša go fapana tša gatee:

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

O ka laetša gape mmala wa motheo ka mešomo ya rena ya mmapa wa mebala:

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

Sass dikgetho

Tlwaetša Bootstrap 4 ka faele ya rena ya diphetogo tša tlwaelo yeo e agetšwego ka gare gomme o fetoše gabonolo dikgetho tša CSS tša lefase ka bophara ka $enable-*diphetogo tše mpsha tša Sass. Tloša boleng bja phetogo gomme o kgoboketše gape ka npm run testge go nyakega.

O ka hwetša le go tlwaetša diphetogo tše bakeng sa dikgetho tša bohlokwa tša lefase ka bophara ka scss/_variables.scssfaeleng ya Bootstrap.

Mmala

Bontši bja dikarolo tše di fapa-fapanego tša Bootstrap le didirišwa di agilwe ka letoto la mebala yeo e hlalositšwego mmapeng wa Sass. Mmapa wo o ka looped godimo ka go Sass go tšweletša ka pela lelokelelo la dihlopha tša melao.

Mebala ka moka

Mebala ka moka yeo e hwetšagalago go Bootstrap 4, e hwetšagala bjalo ka diphetogo tša Sass le mmapa wa Sass ka scss/_variables.scssfaeleng. Se se tla katološwa godimo ga ditokollo tše nnyane tše di latelago go oketša meriti ya tlaleletšo, go swana kudu le phalete ya greyscale yeo re šetšego re e akaretša.

Ke kamoo o ka dirišago tše ka gona ka go Sass ya gago:

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

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

Diklase tša mohola wa mebala le tšona di a hwetšagala bakeng sa go beakanya colorle background-color.

Mebala ya sehlogo

Re šomiša sehlopha se senyenyane sa mebala ka moka go hlama phalete ye nnyane ya mebala ya go tšweletša dikema tša mebala, yeo gape e hwetšagalago bjalo ka diphetogo tša Sass le mmapa wa Sass ka scss/_variables.scssfaeleng ya Bootstraps.

Diputswa

Sete ye e atološitšwego ya diphetogo tša bohlokwahlokwa le mmapa wa Sass ka gare scss/_variables.scssbakeng sa meriti ye e sa fetogego ya bohlokwahlokwa go ralala le projeke ya gago. Hlokomela gore tše ke “diputswa tše di fodilego”, tšeo di sekametšego go segalo sa mmala wo mopududu wo o sa bonagalego, go e na le diputswa tše di sa tšeego lehlakore.

Ka gare ga scss/_variables.scss, o tla hwetša diphetogo tša mmala tša Bootstrap le mmapa wa Sass. Mohlala wa $colorsmmapa wa Sass ke wo:

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

Oketša, tloša, goba fetoša dikelo ka gare ga mmapa go mpshafatša ka fao di šomišwago ka gona dikarolong tše dingwe tše ntši. Ka bomadimabe mo nakong ye, ga se karolo e nngwe le e nngwe yeo e dirišago mmapa wo wa Sass. Diapdeite tša ka moso di tla katanela go kaonafatša se. Go fihla ka nako yeo, rulaganya go šomiša ${color}diphetogo le mmapa wo wa Sass.

Dikarolo

Bontši bja dikarolo tša Bootstrap le didirišwa di agilwe ka @eachdiloupu tšeo di ipoeletšago godimo ga mmapa wa Sass. Se se thuša kudu bakeng sa go tšweletša diphetogo tša karolo ka rena $theme-colorsle go hlola diphetogo tše di arabelago bakeng sa ntlha e nngwe le e nngwe ya go kgaotša. Ge o dutše o tlwaetša dimmapa tše tša Sass le go kgoboketša gape, o tla bona ka go iketla diphetogo tša gago di bonagala ka gare ga diloupu tše.

Diphetogo

Bontši bja dikarolo tša Bootstrap di agilwe ka mokgwa wa sehlopha sa motheo-mofetoši. Se se ra gore bontši bja setaele bo na le sehlopha sa motheo (mohlala, .btn) mola diphetogo tša setaele di lekanyeditšwe go dihlopha tša sefetoši (mohlala, .btn-danger). Diklase tše tša sefetoši di agilwe go tšwa $theme-colorsmmapeng go dira go tlwaetša palo le leina la dihlopha tša rena tša sefetoši.

Mehlala ye mebedi ya ka moo re loop godimo ga $theme-colorsmmapa go tšweletša diphetoši go .alertkarolo le .bg-*didirišwa tša rena ka moka tša ka morago ke tše.

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

Go arabela

Diloupu tše tša Sass ga di lekanyetšwe go dimmapa tša mebala, le tšona. O ka tšweletša gape diphetogo tše di arabelago tša dikarolo tša gago goba didirišwa tša gago. Tšea mohlala didirišwa tša rena tša go logaganya sengwalwa sa go arabela moo re hlakanyago @eachseloupu sa $grid-breakpointsmmapa wa Sass ka potšišo ya boraditaba e akaretša.

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

Ge e ba o swanetše go swanelwa ke go fetoša ya gago $grid-breakpoints, diphetogo tša gago di tla šoma go diloupu ka moka tšeo di ipoeletšago godimo ga mmapa woo.

Diphetogo tša CSS

Bootstrap 4 e akaretša go dikologa dithoto tše pedi tše pedi tša tlwaelo tša CSS (diphetogo) ka go CSS ya yona yeo e kgobokeditšwego. Tše di fa phihlelelo ye bonolo go dikelo tše di šomišwago ka tlwaelo go swana le mebala ya rena ya sehlogo, dintlha tša go kgaotša, le mekgobo ya difonte tša mathomo ge o šoma ka go Mohlahlobi wa sephephediši sa gago, lepokisi la santa la khoutu, goba prototype ya kakaretšo.

Diphetogo tše di lego gona

Diphetogo tšeo re di akaretšago ke tše (hlokomela gore the :roote a nyakega). Di hwetšwa ka _root.scssfaeleng ya rena.

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

Mehlala

Diphetogo tša CSS di fa go fetofetoga mo go swanago le diphetogo tša Sass, eupša ntle le go nyakega ga go kgoboketša pele di fiwa sephephediši. Go fa mohlala, mo re seta gape fonte ya letlakala la rena le mekgwa ya kgokagano ka diphetogo tša CSS.

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

Diphetogo tša ntlha ya go kgaotša

Le ge mathomong re be re akaretša dintlha tša go kgaotša ka go diphetogo tša rena tša CSS (mohlala, --breakpoint-md), tše ga di thekgwe ka dipotšišong tša boraditaba , eupša di sa dutše di ka šomišwa ka gare ga dihlopha tša melao ka dipotšišong tša boraditaba. Diphetogo tše tša breakpoint di dula di le ka gare ga CSS ye e kgobokeditšwego bakeng sa go sepelelana ga morago ge go fiwa gore di ka šomišwa ke JavaScript. Ithute ka botlalo go spec .

Mohlala wa seo se sa thekgwego ke wo:

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

Gomme mohlala wa seo se thekgwago ke wo:

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