Midabka
Bootstrap waxaa taageera nidaam midab leh oo ballaaran kaas oo mawduuca ka dhigaya qaababkayada iyo qaybahayada. Tani waxay awood u siinaysaa habaynta iyo fidinta mashruuc kasta.
Midabada mawduuca
Waxaan isticmaalnaa qayb ka mid ah dhammaan midabada si aan u abuurno palette midab yar si loo soo saaro nidaamyada midabka, sidoo kale loo heli karo doorsoomayaasha Sass iyo khariidadda Sass ee scss/_variables.scss
faylka Bootstrap.
Dhammaan midabadani waxay diyaar u yihiin sida khariidadda Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Fiiri khariidadahayada Sass iyo dokumentiyada loops -yada sida loo beddelo midabadaas.
Dhammaan midabada
Dhammaan midabada Bootstrap waxay diyaar u yihiin doorsoomayaasha Sass iyo khariidadda Sass ee scss/_variables.scss
faylka. Si looga fogaado kordhinta cabbirrada faylalka, uma samaynayno qoraal ama fasalo midab gadaasha mid kasta oo ka mid ah doorsoomayaashan. Taa baddalkeeda, waxaan dooranaa qayb-hoosaadyadan midabada ah ee palette mawduuca .
U hubso inaad la socoto saamiga isbarbardhiga marka aad habaynayso midabada. Sida hoos ku cad, waxaanu ku darnay saddex is barbar dhig mid kasta oo ka mid ah midabada ugu muhiimsan - mid loogu talagalay midabada swatch ee hadda, mid ka soo horjeeda caddaan, iyo mid ka soo horjeeda madow.
Qoraalada Sass
Sass barnaamij ahaan ma dhalin karo doorsoomayaasha, markaa waxaanu gacanteena ku abuurnay doorsoomayaasha midab kasta oo nafaheena hadh. Waxaan qeexnaa qiimaha bartanka dhexe (tusaale, $blue-500
) waxaana isticmaalnaa shaqooyinka midabka caadiga ah si loo midabeeyo (loo iftiimiyo) ama loo hadheeyo (madoobaado) midabadayada iyadoo loo marayo mix()
shaqada midabka Sass.
Isticmaalka mix()
la mid ma aha lighten()
iyo darken()
— kii hore waxa uu isku daraa midabka la cayimay oo leh caddaan ama madow, halka kan dambe uu kaliya hagaajiyo qiimaha iftiinka midab kasta. Natiijadu waa midabyo aad u dhammaystiran, sida ku cad CodePen demo .
Shaqadeena tint-color()
iyo shade-color()
hawlaheenna waxay mix()
la adeegsadaan $theme-color-interval
doorsoomayaashayada, kaas oo qeexaya qiimaha boqolleyda la talaabsaday ee midab kasta oo isku dhafan oo aan soo saarno. Fiiri faylasha scss/_functions.scss
iyo scss/_variables.scss
koodka isha oo dhan.
Midabka Sass maab
Bootstrap's isha Faylasha Sass waxaa ka mid ah saddex khariidado si ay kaaga caawiyaan si dhakhso leh oo fudud u dulmar liiska midabada iyo qiyamkooda hex.
$colors
wuxuu taxayaa dhammaan500
midabada salka diyaarka ah$theme-colors
taxayaa dhammaan midabada mawduucyada si macne ahaan loo magacaabay (hoos lagu muujiyey)$grays
wuxuu taxayaa dhammaan midabada iyo hadhka cawliga
Gudaha scss/_variables.scss
, waxaad ka heli doontaa doorsoomayaasha midabka Bootstrap iyo khariidadda Sass. Waa kuwan tusaale $colors
khariidadda 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
);
Ku dar, ka saar, ama wax ka beddel qiyamka khariidada dhexdeeda si aad u cusboonaysiiso sida loogu isticmaalo qaybo kale oo badan. Nasiib darro wakhtigan, ma aha qayb kasta oo ka faa'iidaysata khariidadan Sass. Cusboonaysiinta mustaqbalka waxay ku dadaali doontaa inay horumariso tan. Ilaa markaas, qorshee isticmaalka ${color}
doorsoomayaasha iyo khariidadan Sass.
Tusaale
Waa kuwan sida aad kuwan ugu isticmaali karto Sass-kaaga:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Midabka iyo fasallada utility asalka ayaa sidoo kale diyaar u ah dejinta color
iyo background-color
isticmaalka 500
qiimaha midabka.