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 dist
fayl 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ɔ. 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:
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.
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.
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 // Optional
sɛkshɔn as nid de. Wi de advays yu fɔ yuz di ful import stak frɔm wi bootstrap.scss
fayl as yu statin pɔynt.
Difɔlt dɛn we de chenj chenj
Ɛvri Sass vɛriɔbul na Bootstrap 4 inklud di !default
flag 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 !default
flag. 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ɔ di vayriɔbul dɛn we Bootstrap gɛt 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.
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 color
fɔ di <body>
we yu de import ɛn kɔmpilayt Bootstrap via npm:
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 !default
flag ɛ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-colors
map, ad dɛn tin ya to yu kɔstɔm Sass fayl:
Ad pan di map
Fɔ ad nyu kɔlɔ to $theme-colors
, ad di nyu ki ɛn valyu:
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:
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 danger
ki dɛn frɔm $theme-colors
fɔ 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:
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.
Wi gɛt ɔda wok bak fɔ gɛt wan patikyula lɛvul fɔ kɔlɔ frɔm di $theme-colors
map. Negatif lɛvɛl valyu dɛn go mek di kɔlɔ layt, we di ay lɛvɛl dɛn go dak.
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.
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ɔ bays pan 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-colors
map:
Yu kin yuz am bak fɔ wan-wan kɔntrast nid dɛn:
Yu kin sho bak wan bays kɔlɔ wit wi kɔlɔ map fɛnshɔn dɛn:
Escape fɔ SVG
Wi de yuz di escape-svg
fɛ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.
Add ɛn Subtract di fɛnshɔn dɛn
Wi de yuz di add
ɛn subtract
fɛnshɔn dɛn fɔ rap di CSS calc
fɛnshɔn. Di men rizin fɔ dɛn fɛnshɔn ya na fɔ avɔyd mistek we dɛn pas wan valyu we “yunit nɔ gɛt” 0
insay wan calc
ɛksprɛshɔn. Ɛksprɛshɔn dɛn lɛk calc(10px - 0)
go gi bak wan mistek na ɔl di brɔuza dɛn, pan ɔl we i kɔrɛkt pan matematiks.
Ɛgzampul usay di kalk valid:
Example usay di kalc nɔ valid:
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 test
as 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.scss
fayl.
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 tɔk bɔt 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 tɔk bɔt 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-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-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. |
$enable-deprecation-messages |
true ɔ false (difɔlt) . |
Sɛt to true fɔ sho wɔnin dɛn we yu de yuz ɛni wan pan di miksin dɛn we nɔ de igen ɛn di 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.scss
fayl. 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.
Na so yu kin yuz dɛn wan ya na yu Sass:
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.scss
fayl.
Greys dɛn
Wan big sɛt fɔ grey vɛriɔbul ɛn wan Sass map in scss/_variables.scss
fɔ 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.
Insay scss/_variables.scss
, yu go si Bootstrap in kɔlɔ vɛriɔbul dɛn ɛn Sass map. Na wan ɛgzampul fɔ di $colors
Sass map:
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 @each
lɔ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-colors
map 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-colors
map fɔ jenarayz modifya dɛn to di .alert
kɔmpɔnɛnt ɛn ɔl wi .bg-*
bakgrɔn yutiliti dɛn.
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 @each
lɔp fɔ di $grid-breakpoints
Sass map wit wan midia kwɛstyɔn inklud.
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 :root
is required). Dɛn de na wi _root.scss
fayl.
Ɛ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.
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:
Ɛn na wan ɛgzampul bɔt wetin dɛn sɔpɔt: