Umbala
I-Bootstrap ixhaswa yinkqubo yombala ebanzi enemixholo yezitayile zethu kunye namalungu. Oku kuvumela ulungelelwaniso olubanzi kunye nokwandiswa kwayo nayiphi na iprojekthi.
Imibala yomxholo
Sisebenzisa iseti esezantsi yayo yonke imibala ukwenza iphalethi yombala omncinci wokuvelisa izikimu zombala, ezifumanekayo njengeenguqu zeSass kunye nemephu yeSass scss/_variables.scss
kwifayile yeBootstrap.
Yonke le mibala iyafumaneka njengemephu ye-Sass $theme-colors
,.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Jonga iimephu zethu zeSass kunye neelophu amaxwebhu malunga nendlela yokuguqula le mibala.
Yonke imibala
Yonke imibala yeBootstrap iyafumaneka njengeenguqu zeSass kunye nemephu yeSass scss/_variables.scss
kwifayile. Ukunqanda ukonyuka kobukhulu befayile, asenzi iteksti okanye iiklasi zemibala yemvelaphi yazo zonke ezi ziguquguqukayo. Endaweni yoko, sikhetha iseti esezantsi yale mibala kwiphalethi yomxholo .
Qinisekisa ukuba ubeka iliso kwireyishini yokuthelekisa njengoko ulungiselela imibala. Njengoko kubonisiwe ngezantsi, songeze uthelekiso oluthathu lochasaniso kumbala ngamnye ongundoqo-omnye ube ngowombala weswotshi yangoku, omnye uchasene nomhlophe, kwaye omnye ngowomnyama.
Amanqaku kwiSass
I-Sass ayinakukwazi ukuvelisa izinto eziguquguqukayo ngokwenkqubo, ngoko ke senze izinto eziguquguqukayo ngokwazo zonke i-tint kunye nomthunzi ngokwethu. Sikhankanya ixabiso lendawo ephakathi (umzekelo, $blue-500
) kwaye sisebenzise imisebenzi yombala oqhelekileyo ukwenza i-tint (ikhanyisa) okanye yenze umthunzi (uyenze mnyama) imibala yethu mix()
ngombala weSass.
Ukusebenzisa mix()
akufani noku lighten()
— darken()
owokuqala udibanisa umbala ochaziweyo nomhlophe okanye omnyama, ngoxa lo mva ulungisa kuphela ixabiso lokukhanya kombala ngamnye. Isiphumo sisiqulatho esipheleleyo semibala, njengoko kubonisiwe kule demo yeCodePen .
Eyethu tint-color()
kunye shade-color()
nemisebenzi isetyenziswa mix()
ecaleni kokuguquguquka kwethu $theme-color-interval
, okuchaza ixabiso lepesenti elinyusiweyo kumbala ngamnye oxutyiweyo esiwuvelisayo. Jonga scss/_functions.scss
kunye scss/_variables.scss
neefayile zekhowudi yemvelaphi epheleleyo.
Iimephu zeSass ezinombala
Iifayile zeSass zomthombo weBootstrap zibandakanya iimephu ezintathu zokukunceda ngokukhawuleza nangokulula ukulophu kuluhlu lwemibala kunye namaxabiso abo e-hex.
$colors
dwelisa yonke isiseko esikhoyo (500
) imibala$theme-colors
dwelisa yonke imibala ebhalwe ngokwesemantiki (eboniswe ngezantsi)$grays
dwelisa zonke iitinti kunye nemibala engwevu
Ngaphakathi scss/_variables.scss
, uya kufumana iinguqu zemibala zeBootstrap kunye nemephu ye-Sass. Nanku umzekelo $colors
wemephu ye-Sass:
$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
);
Yongeza, susa, okanye ulungise amaxabiso kwimaphu ukuhlaziya indlela asetyenziswa ngayo kwezinye izinto ezininzi. Ngelishwa ngeli xesha, asingawo onke amacandelo asebenzisa le mephu ye-Sass. Uhlaziyo lwexesha elizayo luya kuzama ukuphucula oku. Kude kube ngoko, cwangcisa ukusetyenziswa kwezinto ${color}
eziguquguqukayo kunye nale mephu ye-Sass.
Umzekelo
Nantsi indlela onokuzisebenzisa ngayo ezi kwiSass yakho:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Umbala kunye neeklasi zoncedo lwangasemva zikwakhona ukuseta color
nokusebenzisa background-color
amaxabiso 500
ombala.
Ukuvelisa izinto eziluncedo
Ifakwe kwi-v5.1.0
I-Bootstrap ayiquki color
kunye background-color
nezinto eziluncedo kuwo wonke umbala oguquguqukayo, kodwa ungazivelisa ngokwakho nge -API yethu eluncedo kunye neemephu zethu zeSass ezongeziweyo kwi-v5.1.0.
- Ukuqala, qiniseka ukuba ungenise ngaphandle imisebenzi yethu, izinto ezahlukeneyo, imixube, kunye nezinto eziluncedo.
- Sebenzisa
map-merge-multiple()
umsebenzi wethu ukudibanisa ngokukhawuleza iimephu ezininzi zeSass kwimephu entsha. - Dibanisa le mephu intsha idityanisiweyo ukwandisa nayiphi na into eluncedo enegama
{color}-{level}
lodidi.
Nanku umzekelo ovelisa izinto eziluncedo zombala wokubhaliweyo (umzekelo, .text-purple-500
) usebenzisa la manyathelo angentla.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
Oku kuya kuvelisa .text-{color}-{level}
izixhobo ezitsha kuwo wonke umbala kunye nenqanaba. Unokwenza okufanayo kuyo nayiphi na enye into eluncedo kunye nepropathi ngokunjalo.