Koulè
Bootstrap sipòte pa yon sistèm koulè vaste ki tèm estil nou yo ak konpozan. Sa pèmèt personnalisation ak ekstansyon plis konplè pou nenpòt pwojè.
Koulè tèm
Nou itilize yon sou-ansanm tout koulè pou kreye yon palèt koulè ki pi piti pou jenere plan koulè, ki disponib tou kòm varyab Sass ak yon kat Sass nan scss/_variables.scss
dosye Bootstrap la.
Tout koulè sa yo disponib kòm yon kat Sass, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Tcheke kat Sass ak dokiman bouk nou yo pou konnen kijan pou modifye koulè sa yo.
Tout koulè
Tout koulè Bootstrap yo disponib kòm varyab Sass ak yon kat Sass nan scss/_variables.scss
dosye. Pou evite ogmante gwosè dosye, nou pa kreye tèks oswa klas koulè background pou chak nan varyab sa yo. Olye de sa, nou chwazi yon pati nan koulè sa yo pou yon palèt tèm .
Asire w ou kontwole rapò kontras jan ou personnaliser koulè. Jan yo montre pi ba a, nou te ajoute twa rapò kontras nan chak koulè prensipal yo—yon sèl pou koulè aktyèl echantiyon an, youn pou kont blan, ak youn pou kont nwa.
Nòt sou Sass
Sass pa ka jenere varyab pwogramasyon, kidonk nou te kreye varyab manyèlman pou chak tente ak lonbraj tèt nou. Nou presize valè mitan pwen an (egzanp, $blue-500
) epi sèvi ak fonksyon koulè koutim pou tente (aleje) oswa lonbraj (fè nwa) koulè nou yo atravè mix()
fonksyon koulè Sass la.
Sèvi ak mix()
se pa menm lighten()
ak ak darken()
—ansyen an melanje koulè espesifye a ak blan oswa nwa, pandan y ap lèt la sèlman ajiste valè a légèreté nan chak koulè. Rezilta a se yon seri koulè pi konplè, jan yo montre nan Demo CodePen sa a .
Nou tint-color()
ak shade-color()
fonksyon yo itilize mix()
ansanm ak $theme-color-interval
varyab nou an, ki espesifye yon valè pousantaj etap pou chak koulè melanje nou pwodwi. Gade scss/_functions.scss
ak scss/_variables.scss
fichye yo pou tout kòd sous la.
Koulè Sass kat
Fichye Sass sous Bootstrap yo genyen twa kat pou ede w byen vit ak fasilman bouk sou yon lis koulè ak valè hex yo.
$colors
bay lis tout500
koulè baz ( ) disponib nou yo$theme-colors
lis tout koulè tèm yo rele semantik (yo montre anba a)$grays
bay lis tout koulè ak tout koulè gri
Nan scss/_variables.scss
, w ap jwenn varyab koulè Bootstrap ak kat Sass. Men yon egzanp $colors
kat Sass la:
$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
);
Ajoute, retire oswa modifye valè nan kat la pou mete ajou fason yo itilize yo nan anpil lòt konpozan. Malerezman nan moman sa a, se pa tout eleman ki itilize kat Sass sa a. Mizajou nan lavni yo pral fè efò pou amelyore sa a. Jiska lè sa a, planifye pou sèvi ak ${color}
varyab yo ak kat Sass sa a.
Egzanp
Men ki jan ou ka itilize sa yo nan Sass ou a:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Koulè ak klas sèvis piblik yo disponib tou pou mete color
ak background-color
itilize 500
valè koulè yo.