Di tim fɔ di Bootstrap

Kastamayz Bootstrap 4 wit wi nyu bilt-in Sass vɛriɔbul fɔ glob ɔl stayl prɛferɛns fɔ izi tim ɛn kɔmpɔnɛnt chenj dɛn.

Sho

Insay Bootstrap 3, tim bin big wan de drɛb bay vayriɔbul ɔvarayd dɛn na LESS, kɔstɔm CSS, ɛn wan sɛpret tim staylshit we wi put insay wi distfayl dɛn. Wit sɔm tray, pɔsin kin kɔmplit wan ridizayn di luk fɔ Bootstrap 3 we nɔ tɔch di kɔr fayl dɛn. Bootstrap 4 de gi yu wan we yu sabi, bɔt we difrɛn smɔl.

Naw, di tim de akɔmplit bay Sass vɛriɔbul dɛn, Sass map dɛn, ɛn kɔstɔm CSS. No mɔ dediket tim staylshit nɔ de; bifo dat, yu kin mek di tim we dɛn bil insay ebul fɔ ad grɛdiɛnt dɛn, shado dɛn, ɛn ɔda tin dɛn.

Sass bin de

Yuz wi sɔs Sass fayl dɛn fɔ tek advantej pan vɛriɔbul dɛn, map dɛn, miksin dɛn, ɛn mɔ. Insay wi bild wi dɔn inkrisayz di Sass rawndin prɛsishɔn to 6 (bay difɔlt na 5) fɔ mek i nɔ gɛt prɔblɛm wit brawza rawndin.

Fayl strɔkchɔ

Ɛnitɛm we i pɔsibul, nɔ chenj di kɔr fayl dɛn na Bootstrap. Fɔ Sass, dat min se yu fɔ mek yu yon staylshit we de import Bootstrap so dat yu go ebul fɔ chenj ɛn ɛkstɛnd am. If yu tek am se yu de yuz pakej manija lɛk npm, yu go gɛt fayl strɔkchɔ we tan lɛk dis:

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

If yu dɔn dawnlod wi sɔs fayl dɛn ɛn yu nɔ de yuz pakej manija, yu go want fɔ sɛtup sɔntin we fiba da strɔkchɔ de wit yu an, ɛn kip Bootstrap in sɔs fayl dɛn separet frɔm yu yon.

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

Impɔtant tin dɛn

Insay yu custom.scss, yu go import Bootstrap in sɔs Sass fayl dɛn. Yu gɛt tu opshɔn dɛn: put ɔl di Bootstrap, ɔ pik di pat dɛn we yu nid. Wi de ɛnkɔrej di las wan dɛn, pan ɔl we wi fɔ no se sɔm tin dɛn de we wi nid ɛn dipɛnshɔn dɛn de akɔdin to wi kɔmpɔnɛnt dɛn. Yu go nid bak fɔ put sɔm JavaSkript fɔ wi plɔgin dɛn.

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

Wit dat setup in ples, yu kin bigin fɔ chenj ɛni wan pan di Sass vɛriɔbul ɛn map dɛn na yu custom.scss. Yu kin bigin bak fɔ ad sɔm pat dɛn na Bootstrap ɔnda di // Optionalsɛkshɔn as nid de. Wi de advays yu fɔ yuz di ful import stak frɔm wi bootstrap.scssfayl as yu statin pɔynt.

Difɔlt dɛn we de chenj chenj

Ɛvri Sass vɛriɔbul na Bootstrap 4 inklud di !defaultflag we de alaw yu fɔ ɔvalayz di vɛriɔbul in difɔlt valyu na yu yon Sass we yu nɔ chenj Bootstrap in sɔs kɔd. Kɔpi ɛn pas di vɛriɔbul dɛn as nid de, chenj dɛn valyu dɛn, ɛn pul di !defaultflag. If dɛn dɔn ɔlrɛdi asaynd wan vɛriɔbul, den i nɔ go ri-asayn bay di difɔlt valyu dɛn na Bootstrap.

Yu go fɛn di kɔmplit list fɔ Bootstrap in vɛriɔbul dɛn na scss/_variables.scss.

Variable ovarayd insay di sem Sass fayl kin kam bifo ɔ afta di difɔlt vɛriɔbul dɛn. Bɔt we yu de ɔvalayz akɔdin to Sass fayl dɛn, yu ɔvarayd dɛn fɔ kam bifo yu impɔtɔt Bootstrap in Sass fayl dɛn.

Na wan ɛgzampul we de chenj di background-colorɛn colorfɔ di <body>we yu de import ɛn kɔmpilayt Bootstrap via npm:

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

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

Ripit as nid de fɔ ɛni vɛriɔbul na Bootstrap, inklud di global opshɔn dɛn we de dɔŋ ya.

Map ɛn lɔp dɛn

Bootstrap 4 inklud wan hanful Sass map, ki valyu pe we de mek am izi fɔ jenarayz famili dɛn we gɛt rilayt CSS. Wi de yuz Sass map fɔ wi kɔlɔ dɛn, grid brekpoint dɛn, ɛn ɔda tin dɛn. Jɔs lɛk Sass vɛriɔbul dɛn, ɔl di Sass map dɛn gɛt di !defaultflag ɛn dɛn kin ɔvarayd ɛn ɛkstɛnd dɛn.

Sɔm pan wi Sass map dɛn kin jɔyn to ɛmti wan dɛn bay difɔlt. Dɛn kin du dis fɔ alaw fɔ mek dɛn ebul fɔ ɛkspɛn wan Sas map we dɛn gi am izi wan, bɔt i kin kam wit di kɔst fɔ mek i nɔ izi fɔ pul tin dɛn na map smɔl.

Modify di map fɔ di map

Fɔ chenj wan kɔlɔ we dɔn de na wi $theme-colorsmap, ad dɛn tin ya to yu kɔstɔm Sass fayl:

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

Ad pan di map

Fɔ ad nyu kɔlɔ to $theme-colors, ad di nyu ki ɛn valyu:

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

Rimov am na di map

Fɔ pul di kɔlɔ dɛn na $theme-colors, ɔ ɛni ɔda map, yuz map-remove. Yu fɔ no se yu fɔ put am bitwin wi rikwaymɛnt ɛn opshɔn dɛn:

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

Ki dɛn we dɛn nid

Bootstrap de tek di prezɛns fɔ sɔm spɛshal ki dɛn insay Sass map dɛn as wi de yuz ɛn ɛkstɛnd dɛn wan ya wisɛf. As yu de kɔstɔmayz di map dɛn we de insay, yu kin gɛt mistek usay dɛn de yuz wan patikyula Sass map in ki.

Fɔ ɛgzampul, wi kin yuz di primary, success, ɛn dangerki dɛn frɔm $theme-colorsfɔ link dɛn, bɔtin dɛn, ɛn fɔm stet dɛn. Fɔ riples di valyu dɛn fɔ dɛn ki dɛn ya nɔ fɔ prɛzɛnt ɛni prɔblɛm, bɔt fɔ pul dɛn kin mek Sass kɔmpilayshɔn prɔblɛm dɛn. Insay dɛn instans ya, yu go nid fɔ chenj di Sass kɔd we de mek yus to dɛn valyu dɛn de.

Di wok dɛn we dɛn de du

Bootstrap de yuz sɔm Sass fɛnshɔn dɛn, bɔt na wan sabsɛt nɔmɔ dɛn kin yuz fɔ jenɛral tim. Wi dɔn put tri fɛnshɔn dɛn fɔ gɛt valyu dɛn frɔm di kala map dɛn:

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

Dis de alaw yu fɔ pik wan kɔlɔ frɔm wan Sass map bɔku lɛk aw yu go yuz wan kɔlɔ vɛriɔbul frɔm v3.

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

Wi gɛt ɔda wok bak fɔ gɛt wan patikyula lɛvul fɔ kɔlɔ frɔm di $theme-colorsmap. Negatif lɛvɛl valyu dɛn go mek di kɔlɔ layt, we di ay lɛvɛl dɛn go dak.

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

Insay prɔsis, yu go kɔl di fɛnshɔn ɛn pas insay tu paramita dɛn: di nem fɔ di kɔlɔ frɔm $theme-colors(ɛgz., praymari ɔ denja) ɛn wan nɔmba lɛvɛl.

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

Yu kin ad ɔda fɛnshɔn dɛn tumara bambay ɔ yu yon kɔstɔm Sass fɔ mek lɛvul fɛnshɔn dɛn fɔ ɔda Sass map dɛn, ɔ ivin wan jenɛrik wan if yu want fɔ bi mɔ verbose.

Difrɛn frɔm di kɔlɔ dɛn

Wan ɔda wok we wi put insay Bootstrap na di kɔlɔ kɔntrast fɛnshɔn, color-yiq. I de yuz di YIQ kɔlɔ spɛs fɔ ɔtomɛtik ritɔn wan layt ( #fff) ɔ dak ( #111) kɔntrast kɔlɔ bay di bays kɔlɔ we dɛn dɔn spɛsifa. Dis funkshɔn de yus mɔ fɔ miksin ɔ lɔp usay yu de jenarayz bɔku klas dɛn.

Fɔ ɛgzampul, fɔ mek dɛn gɛt kɔlɔ swatch dɛn frɔm wi $theme-colorsmap:

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

Yu kin yuz am bak fɔ wan-wan kɔntrast nid dɛn:

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

Yu kin sho bak wan bays kɔlɔ wit wi kɔlɔ map fɛnshɔn dɛn:

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

Sass opshɔn dɛn

Kastamayz Bootstrap 4 wit wi bilt-in kɔstɔm vɛriɔbul fayl ɛn izi fɔ tɔgl glob ɔl CSS prɛferɛns wit nyu $enable-*Sass vɛriɔbul dɛn. Ɔvarayd wan vɛriɔbul in valyu ɛn rikompayl wit npm run testas nid de.

Yu kin fɛn ɛn kɔstɔmayz dɛn vɛriɔbul dɛn ya fɔ di men glob ɔl opshɔn dɛn na Bootstrap in scss/_variables.scssfayl.

Di tin dɛn we kin chenj	Di valyu dɛn we pɔsin gɛt	Tɔk bɔt
`$spacer`	`1rem`(difɔlt), ɔ ɛni valyu > 0	Spesifiket di difɔlt spɛshal valyu fɔ programmɛtik wan jenarayz wi spɛshal yutiliti dɛn .
`$enable-rounded`	`true`(difɔlt) ɔ`false`	I de mek `border-radius`dɛn ebul fɔ yuz stayl dɛn we dɛn dɔn disayd fɔ du bifo tɛm pan difrɛn kɔmpɔnɛnt dɛn.
`$enable-shadows`	`true`ɔ `false`(difɔlt) .	I de mek `box-shadow`dɛn ebul fɔ yuz stayl dɛn we dɛn dɔn disayd fɔ du bifo tɛm pan difrɛn kɔmpɔnɛnt dɛn.
`$enable-gradients`	`true`ɔ `false`(difɔlt) .	Enables prɛdifayn gradients via `background-image`stayl dɛn pan difrɛn kɔmpɔnɛnt dɛn.
`$enable-transitions`	`true`(difɔlt) ɔ`false`	Enables prɛdifayn `transition`s pan difrɛn kɔmpɔnɛnt dɛn.
`$enable-prefers-reduced-motion-media-query`	`true`(difɔlt) ɔ`false`	Enables the `prefers-reduced-motion`media query , we de stɔp sɔm animashɔn/transishɔn dɛn bay di yuza dɛn brawza/ɔpreshɔn sistem prɛferɛns.
`$enable-hover-media-query`	`true`ɔ `false`(difɔlt) .	Dɛn nɔ de yuz am yet
`$enable-grid-classes`	`true`(difɔlt) ɔ`false`	Enable di jenereshɔn fɔ CSS klas fɔ di grid sistem (ɛgz., `.container`, `.row`, `.col-md-1`, ɛn ɔda wan dɛn).
`$enable-caret`	`true`(difɔlt) ɔ`false`	Enables pseudo element caret pan `.dropdown-toggle`.
`$enable-print-styles`	`true`(difɔlt) ɔ`false`	I de mek stayl dɛn ebul fɔ print fayn fayn wan.
`$enable-validation-icons`	`true`(difɔlt) ɔ`false`	I de ɛnabul `background-image`aykɔn dɛn insay tɛkstual input dɛn ɛn sɔm kɔstɔm fɔm dɛn fɔ validɛshɔn stet dɛn.

Kɔlɔ

Bɔku pan di difrɛn kɔmpɔnɛnt ɛn yutiliti dɛn we Bootstrap gɛt, dɛn bil am tru wan siriɔs kɔlɔ we dɛn dɔn difayn insay wan Sass map. Dis map kin bi loop ova in Sass fɔ kwik kwik wan jenarayz wan siriɔs ruleset.

Ɔl di kɔlɔ dɛn

Ɔl di kɔlɔ dɛn we de na Bootstrap 4, de as Sass vɛriɔbul dɛn ɛn wan Sass map insay scss/_variables.scssfayl. Dis go bi pan di smɔl smɔl rilis dɛn we de kam afta dat fɔ ad ɔda shed dɛn, jɔs lɛk di greyskel palet we wi dɔn ɔlrɛdi put insay.

Blu

Indigo we dɛn kɔl Indigo

Pɔrpul

Pink

Rɛd

Ɔrinch

Yala

Grin

Til we dɛn kɔl Teal

Sayn we dɛn kɔl Sayn

Na so yu kin yuz dɛn wan ya na yu Sass:

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

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

Kɔlɔ yutiliti klas dɛn de bak fɔ sɛt colorɛn background-color.

Insay di fyuchu, wi go aim fɔ gi Sass map ɛn vɛriɔbul fɔ shed dɛn fɔ ɛni kɔlɔ lɛk aw wi dɔn du wit di greyskel kɔlɔ dɛn we de dɔŋ ya.

Di tim kɔlɔ dɛn

Wi de yuz wan sɔbsɛt fɔ ɔl di kɔlɔ dɛn fɔ mek wan smɔl kɔlɔ palet fɔ jenarayz kala skim dɛn, we de bak as Sass vɛriɔbul dɛn ɛn wan Sass map na Bootstraps in scss/_variables.scssfayl.

Fɔs

Sɛkɔndari

Go bifo

Denja

Wɔnin

Info

Layt

Dak

Greys dɛn

Wan big sɛt fɔ grey vɛriɔbul ɛn wan Sass map in scss/_variables.scssfɔ kɔnsistɛns shed dɛn fɔ grey akɔdin to yu prɔjek. Notis se dis na “kul grey”, we kin tεnd to wan subtil blu tכn, pas nyutral grey.

100 pipul dɛn

200 pipul dɛn

300 pipul dɛn

400 pipul dɛn

500 pipul dɛn

600 pipul dɛn

700 pipul dɛn

800 pipul dɛn

900 pipul dɛn

Insay scss/_variables.scss, yu go si Bootstrap in kɔlɔ vɛriɔbul dɛn ɛn Sass map. Na wan ɛgzampul fɔ di $colorsSass map:

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

Ad, pul, ɔ chenj valyu dɛn insay di map fɔ ɔpdet aw dɛn de yuz dɛn na bɔku ɔda kɔmpɔnɛnt dɛn. Na ɔnfɔni na dis tɛm, nɔto ɔl kɔmpɔnɛnt de yuz dis Sass map. Di ɔpdet dɛn we dɛn go gɛt tumara bambay go tray fɔ mek dis bɛtɛ. Te da tɛm de, plan fɔ mek yus to di ${color}vɛriɔbul dɛn ɛn dis Sass map.

Di tin dɛn we de insay di bɔdi

Bɔku pan Bootstrap in kɔmpɔnɛnt ɛn yutiliti dɛn bil wit @eachlɔp dɛn we de itɛrayt oba wan Sass map. Dis na spεshal εp fכ jεnarεt vεryכnt dεm fכ wan kכmכpכnt bay wi $theme-colorsεn kriyayt rεspכnsiv vεryכnt dεm fכ εvri brekpכynt. As yu de kɔstɔmayz dɛn Sass map dɛn ya ɛn kɔmpilayt bak, yu go ɔtomɛtik si yu chenj dɛn we de sho na dɛn lɔp dɛn ya.

Di wan dɛn we de chenj di tin dɛn

Bɔku pan Bootstrap in kɔmpɔnɛnt dɛn bil wit wan bays-mɔdifaya klas aprɔch. Dis min se di bɔku bɔku stayl de insay wan bays klas (ɛgz., .btn) we di stayl chenj dɛn de kɔnfyus to modifya klas dɛn (ɛgz., .btn-danger). Dɛn bil dɛn modifya klas ya frɔm di $theme-colorsmap fɔ mek kɔstɔmayz di nɔmba ɛn nem fɔ wi modifya klas dɛn.

Na tu ɛgzampul dɛn ya bɔt aw wi de lɔp oba di $theme-colorsmap fɔ jenarayz modifya dɛn to di .alertkɔmpɔnɛnt ɛn ɔl wi .bg-*bakgrɔn yutiliti dɛn.

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

Fɔ ansa

Dis Sass loops nor de limited to kala map, tu. Yu kin bak jenarayz rispɔnsiv vɛryushɔn dɛn fɔ yu kɔmpɔnɛnt ɔ yutiliti dɛn. Tek fɔ ɛgzampul wi rispɔnsiv tɛks alaynɛshɔn yutiliti usay wi miks wan @eachlɔp fɔ di $grid-breakpointsSass map wit wan midia kwɛstyɔn inklud.

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

If yu nid fɔ chenj yu $grid-breakpoints, yu chenj dɛn go aplay to ɔl di lɔp dɛn we de itɛrayt oba da map de.

CSS vɛriɔbul dɛn

Bootstrap 4 inklud arawnd tu duzin CSS kɔstɔm prɔpati (variables) insay in kɔmpilayt CSS. Dɛn tin ya de mek am izi fɔ gɛt valyu dɛn we dɛn kin yuz ɔltɛm lɛk wi tim kɔlɔ, brekpɔynt, ɛn praymari font stak dɛn we yu de wok na yu brɔwza in Inspɛkta, wan kɔd sanbɔks, ɔ jenɛral protɔtayp.

Di vayriɔbul dɛn we de

Na di vεriεbul dεm we wi inklud (notis se di :rootis required). Dɛn de na wi _root.scssfayl.

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

Ɛgzampul dɛn

CSS vɛriɔbul dɛn de gi di sem kayn fleksibiliti lɛk Sass in vɛriɔbul dɛn, bɔt dɛn nɔ nid fɔ kɔmpilayt bifo dɛn sav dɛn to di brawza. Fɔ ɛgzampul, na ya wi de riset wi pej in font ɛn link stayl dɛn wit CSS vɛriɔbul dɛn.

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

Brekpɔynt vɛriɔbul dɛn

Wail wi bin ɔrizinali inklud brekpɔynt dɛn na wi CSS vɛriɔbul dɛn (ɛgz., --breakpoint-md), dɛn wan ya nɔ de sɔpɔt insay midia kwɛstyɔn dɛn , bɔt dɛn kin stil yuz dɛn insay rul sɛt dɛn na midia kwɛstyɔn dɛn. Dɛn brekpɔynt vɛriɔbul ya de kɔntinyu fɔ de na di kɔmpilayt CSS fɔ bakwɔd kɔmpitibliti givɛn dɛn kin yuz dɛn bay JavaSkript. Lan mɔ na di spec .

Na wan ɛgzampul bɔt wetin dɛn nɔ sɔpɔt:

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

Ɛn na wan ɛgzampul bɔt wetin dɛn sɔpɔt:

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