Halluu
Bootstrap sirna halluu bal'aa kan akkaataa fi qaamolee keenya mata duree godhuun deeggaramee jira. Kunis pirojektii kamiifuu dhuunfachuu fi dheerina bal'aa dandeessisa.
Halluuwwan mata duree
Tuuta xiqqaa halluuwwan hunda fayyadamnee iskiimota halluu uumuuf paleetii halluu xiqqaa uumuuf, akkasumas akka jijjiiramoota Sass fi kaartaa Sass scss/_variables.scss
faayilii Bootstrap keessatti argama.
Halluuwwan kun hundi akka kaartaa Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Akkaataa halluuwwan kana itti fooyyessitan barreeffamoota Sass maps fi loops keenya ilaalaa .
Halluu hunda
Halluuwwan Bootstrap hundi akka jijjiiramoota Sass fi kaartaa Sass scss/_variables.scss
faayilii keessatti argamu. Hammangaa faayilii dabaluu hambisuuf, tokkoon tokkoo jijjiiramoota kanaaf barruu ykn gita halluu duubbee hin uumnu. Inumaayyuu, tuuta xiqqaa halluuwwan kanaa paleetii matadureedhaaf filanna .
Yeroo halluuwwan dhuunfattu reeshiyoowwan walfaallaa hordofuu kee mirkaneessi. Akkuma armaan gaditti mul'atu, tokkoon tokkoon halluuwwan gurguddootti reeshiyoowwan walfaallaa sadii daballeerra-tokko halluuwwan ammaa swaach, tokko adii irratti, tokko immoo gurraacha irratti.
Yaadannoowwan Sass irratti
Sass sagantaadhaan jijjiiramoota maddisiisuu hin danda'u, kanaaf jijjiiramoota harkaan tint fi shade hundaaf ofii keenyaa uumne. Gatii tuqaa gidduu ifteessina (fkn, $blue-500
) fi faankishiniiwwan halluu amala fayyadamnee halluuwwan keenya karaa faankishinii halluu Sass'n halluu (ifaa) ykn golboo (dukkaneessuu) mix()
fayyadamna.
Fayyadamuun fi —kan mix()
duraa halluu ifteessame adii ykn gurraacha waliin walitti makuun, inni lammaffaan ammoo gatii salphaa halluu tokkoon tokkoo qofa sirreessa. Bu'aan isaas halluuwwan baay'ee guutuu ta'e, akkuma CodePen demo kana keessatti mul'atutti .lighten()
darken()
Faankishiniiwwan keenyaa tint-color()
fi jijjiiramaa keenya cinatti fayyadamu , kunis tokkoon tokkoo halluu makaa oomishnu gatii dhibbeentaa tarkaanfii ifteessa. Koodii madda guutuuf faayiloota fi ilaali .shade-color()
mix()
$theme-color-interval
scss/_functions.scss
scss/_variables.scss
Kaartaa Sass halluu
Faayiloonni Sass madda Bootstrap kaartaa sadii of keessatti qabatu, kunis saffisaa fi salphaatti tarree halluuwwanii fi gatiiwwan heksaadii isaanii irratti akka loop gootu si gargaara.
$colors
500
halluuwwan bu'uuraa ( ) keenya hunda tarreessa$theme-colors
halluuwwan mata duree hiikaan moggaafaman hunda tarreessa (armaan gaditti agarsiifame) .$grays
halluu fi golgaa halluu diimaa hunda tarreessa
Keessatti scss/_variables.scss
, jijjiiramoota halluu Bootstrap fi kaartaa Sass ni argatta. $colors
Fakkeenyi kaartaa Sass kunooti :
$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
);
Akkaataa isaan qaamolee biroo hedduu keessatti itti fayyadaman haaromsuuf gatiiwwan kaartaa keessaa dabali, haqi, ykn fooyyessi. Kan nama dhibu yeroo kanatti, qaamni hundi kaartaa Sass kana hin fayyadamu. Fuulduratti wanti haaraan kana irratti fooyyessuuf ni carraaqu. ${color}
Hanga sanatti jijjiiramootaa fi kaartaa Sass kana fayyadamuu irratti karoorfadhu .
Fakkeenya
Sass keessan keessatti akkamitti kanneen itti fayyadamuu dandeessan kunooti:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Gitoota faayidaa halluu fi duubbee gatiiwwan halluu saaguu color
fi background-color
fayyadamuuf illee ni argamu.500
Faayidaa maddisiisuu
v5.1.0 keessatti dabalameera
Bootstrap jijjiiramaa halluu hundaaf color
fi faayidaa hin dabalatu , garuu API faayidaa keenyaa fi kaartaa Sass bal'aa keenya v5.1.0 keessatti dabalameen ofumaan kanneen maddisiisuu dandeessa.background-color
- Jalqabuuf, faankishiniiwwan, jijjiiramoota, mixins, fi faayidaa keenya galchuu kee mirkaneessi.
map-merge-multiple()
Kaartaa Sass hedduu kaartaa haaraa keessatti saffisaan walitti makuuf faankishinii keenya fayyadami .{color}-{level}
Faayidaa kamiyyuu maqaa gitaa waliin dheeressuuf kaartaa walitti makame haaraa kana walitti makuu .
Fakkeenyi faayidaa halluu barruu (fkn, .text-purple-500
) tarkaanfiiwwan armaan olii fayyadamuun uumu kunooti.
@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";
.text-{color}-{level}
Kunis halluu fi sadarkaa hundaaf faayidaa haaraa ni maddisiisa . Faayidaa fi qabeenya biroo kamiifuu akkasuma gochuu dandeessa.