in English

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 we 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ɔ we yu de kɔmpilayt Sass yuz yu yon ɛset paip layn.

Fayl strɔkchɔ

Ɛnitɛm we i pɔsibul, nɔ chenj di kɔr fayl dɛn na Bootstrap. Fɔ Sass, dat min 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

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

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 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. Sɔm vɛriɔbul dɛn de sɛt to null, dɛn vɛriɔbul ya nɔ de autput di prɔpati pas dɛn ɔvarayd dɛn na yu kɔnfigyushɔn.

Vɛriɔbul ɔvarayd dɛn fɔ kam afta wi fɛnshɔn dɛn, vɛriɔbul dɛn, ɛn miksin dɛn dɔn import, bɔt bifo di ɔda import 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:

@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

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

Get stat wit Bootstrap via npm wit wi stata projek! Hed to di twbs/bootstrap-npm-starter tɛmplat ripɔsitɔri fɔ si aw fɔ bil ɛn kɔstɔmayz Bootstrap na yu yon npm projɛkt. Inklud Sass kɔmpayla, Ɔtoprɛfiksa, Stayllint, PurgeCSS, ɛn Bootstrap Aykɔn dɛn.

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`
}

Escape fɔ SVG

Wi de yuz di escape-svgfɛnshɔn fɔ rɔnawe pan di <, >ɛn #aks fɔ SVG bakgrɔn pikchɔ dɛn. Dɛn aks dɛn ya nid fɔ rɔnawe fɔ mek dɛn ebul fɔ rɛnd di bakgrɔn pikchɔ dɛn fayn fayn wan na IE. We yu de yuz di escape-svgfɛnshɔn, dɛn fɔ kot di data URI dɛn.

Add ɛn Subtract di fɛnshɔn dɛn

Wi de yuz di addɛn subtractfɛnshɔn dɛn fɔ rap di CSS calcfɛnshɔn. Di men rizin fɔ dɛn fɛnshɔn ya na fɔ avɔyd mistek we 0dɛn pas wan valyu we “yunitlɛs” insay wan calcɛksprɛshɔn. Ɛksprɛshɔn dɛn lɛk calc(10px - 0)go gi bak wan mistek na ɔl di brawza dɛn, pan ɔl we i kɔrɛkt pan matematiks.

Ɛgzampul usay di kalk valid:

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

Example usay di kalc nɔ valid:

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

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-radiusdɛ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) . Enabul prɛdifayn dɛkɔretiv box-shadowstayl dɛn pan difrɛn kɔmpɔnɛnt dɛn. Nɔ afɛkt box-shadows we dɛn yuz fɔ fɔs stet dɛn.
$enable-gradients trueɔ false(difɔlt) . Enables prɛdifayn gradients via background-imagestayl dɛn pan difrɛn kɔmpɔnɛnt dɛn.
$enable-transitions true(difɔlt) ɔfalse Enables prɛdifayn transitions pan difrɛn kɔmpɔnɛnt dɛn.
$enable-prefers-reduced-motion-media-query true(difɔlt) ɔfalse Enables the prefers-reduced-motionmedia 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-pointer-cursor-for-buttons true(difɔlt) ɔfalse Ad “han” kɔsa to di bɔtin ɛlimɛnt dɛn we nɔ dɔn disable.
$enable-print-styles true(difɔlt) ɔfalse I de mek stayl dɛn ebul fɔ print fayn fayn wan.
$enable-responsive-font-sizes trueɔ false(difɔlt) . I de mek di font saiz dɛn we de ansa .
$enable-validation-icons true(difɔlt) ɔfalse I de ɛnabul background-imageaykɔ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.
$enable-deprecation-messages true(difɔlt) ɔfalse Sɛt to falsefɔ ayd wɔnin dɛn we yu de yuz ɛni wan pan di miksin dɛn ɛn fɛnshɔn dɛn we dɛn dɔn plan fɔ pul insay v5.

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 wan #007bff fɔ di wan dɛn we de
$indigo fɔ di wan dɛn we de #6610f2 fɔ di wan dɛn
$pepul we de na di wɔl #6f42c1 na di pikchɔ
$pink we yu de #e83e8c fɔ di wan dɛn we de
$rɛd #dc3545 fɔ di wan dɛn we de
$ɔrɛnj #fd7e14 fɔ di wan dɛn we de
$yɔlɔ #ffc107 fɔ di wan dɛn we de
$grin #28a745 na di pikchɔ
$tiɛl #20c997 fɔ di wan dɛn we de
$sayn we dɛn kɔl #17a2b8 na di pikchɔ

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 kɔlɔ skim dɛn, we de bak as Sass vɛriɔbul dɛn ɛn wan Sass map na Bootstrap in scss/_variables.scssfayl.

$praymari #007bff fɔ di wan dɛn we de
$sɛkɔndari #6c757d fɔ di wan dɛn
$sakses fɔ wok #28a745 na di pikchɔ
$denja fɔ de #dc3545 fɔ di wan dɛn we de
$wɔn fɔ wɔn #ffc107 fɔ di wan dɛn we de
$info fɔ di wan dɛn we de #17a2b8 na di pikchɔ
$layt #f8f9fa na di pikchɔ
$dak we dak #343a40 fɔ di wan dɛn we de

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.

$grey-100 fɔ di wan dɛn we de #f8f9fa na di pikchɔ
$grey-200 fɔ di wan dɛn we de #e9ecef fɔ di wan dɛn we de
$grey-300 fɔ di wan dɛn we de #dee2e6 fɔ sho
$grey-400 fɔ di wan dɛn we de #ced4da fɔ di wan dɛn we de
$grey-500 fɔ di wan dɛn #adb5bd fɔ di wan dɛn we de
$grey-600 fɔ di wan dɛn we de #6c757d fɔ di wan dɛn
$grey-700 fɔ di wan dɛn we de #495057 na di pikchɔ
$grey-800 fɔ di wan dɛn we de #343a40 fɔ di wan dɛn we de
$grey-900 fɔ di wan dɛn we de #212529 na di pikchɔ

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, "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;
}

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