Color
Bootstrap inotsigirwa neyakakura yeruvara sisitimu iyo tema masitaera edu uye zvikamu. Izvi zvinogonesa kuwanda kwekugadzirisa uye kuwedzera kune chero chirongwa.
Theme mavara
Isu tinoshandisa subset yemavara ese kugadzira diki pendi yeruvara kugadzira marongero emavara, inowanikwawo semaSass akasiyana uye mepu yeSass muBootstrap's scss/_variables.scss
file.
Ese mavara aya anowanikwa semepu yeSass $theme-colors
,.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Tarisa yedu Sass mepu uye zvishwe zvinyorwa zvekugadzirisa aya mavara.
Mavara ose
Ese mavara eBootstrap anowanikwa semaSass akasiyana uye mepu yeSass scss/_variables.scss
mufaira. Kuti tidzivise kuwedzera masaizi efaira, isu hatigadziri makirasi emavara kana makirasi emavara ega ega aya akasiyana. Pane kudaro, tinosarudza chikamu chiduku chemavara aya nokuda kwepalette yedingindira .
Iva nechokwadi chekutarisa mutsauko wekuenzanisa paunenge uchigadzirisa mavara. Sezvinoratidzwa pazasi, tawedzera mitsara mitatu yakasiyana-siyana kune imwe neimwe yemavara makuru-imwe yeruvara rwechiwachi yazvino, imwe ichipikisa chena, uye imwe ichipikisa nhema.
Zvinyorwa paSass
Sass haigone kuburitsa zvinosiyana, saka isu takagadzira madhiri ega ega tint uye mumvuri isu pachedu. Isu tinotsanangura kukosha kwepakati (semuenzaniso, $blue-500
) uye shandisa maitiro emavara echinyakare kuti tint (kurerutsa) kana mumvuri (kusviba) mavara edu kuburikidza neSass's mix()
color function.
Kushandisa mix()
hakuna kufanana lighten()
uye darken()
-yekutanga inosanganisa ruvara rwakatsanangurwa nemuchena kana dema, nepo yekupedzisira ichingogadzirisa kukosha kwekureruka kwemavara ega ega. Mhedzisiro yacho yakawanda yakazara sutu yemavara, sezvakaratidzwa mune ino CodePen demo .
Yedu tint-color()
uye shade-color()
mashandisirwo anoshandiswa mix()
padivi pekuchinja kwedu $theme-color-interval
, iyo inotsanangudza yakawedzera muzana kukosha kune yega yega yakasanganiswa ruvara rwatinogadzira. Ona iyo scss/_functions.scss
uye scss/_variables.scss
mafaera eiyo yakazara sosi kodhi.
Color Sass mepu
Bootstrap's source Sass mafaera anosanganisira matatu mepu kuti ikubatsire nekukurumidza uye nyore kuruka pamusoro perondedzero yemavara uye iwo hex kukosha.
$colors
inonyora ese edu aripo base (500
) mavara$theme-colors
inodonongodza mavara ese ane zita remusoro (inoratidzwa pazasi)$grays
inonyora mavara ese uye mimvuri yegrey
Mukati me scss/_variables.scss
, iwe unowana Bootstrap's mavara akasiyana uye Sass mepu. Heino muenzaniso $colors
weSass mepu:
$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
);
Wedzera, bvisa, kana shandura kukosha mukati memepu kuti uvandudze mashandisirwo aanoitwa mune zvimwe zvikamu zvakawanda. Nehurombo panguva ino, hazvisi zvese zvikamu zvinoshandisa iyi mepu yeSass. Zvidzoreso zveramangwana zvichaedza kuvandudza pane izvi. Kusvika panguva iyoyo, ronga pakushandisa ${color}
zvinosiyana uye iyi mepu yeSass.
Muenzaniso
Heano maitiro aungashandisa aya muSass yako:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Ruvara uye kumashure utility makirasi aripo zvakare ekuseta color
uye background-color
kushandisa iwo 500
mavara emhando.