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 nan koulè prensipal yo - youn 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 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
bay 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.
Jenere sèvis piblik
Te ajoute nan v5.1.0
Bootstrap pa gen ladann color
ak background-color
sèvis piblik pou chak varyab koulè, men ou ka jenere sa yo tèt ou ak API sèvis piblik nou an ak kat Sass pwolonje nou yo te ajoute nan v5.1.0.
- Pou kòmanse, asire w ke ou te enpòte fonksyon nou yo, varyab, mixin, ak sèvis piblik.
- Sèvi ak
map-merge-multiple()
fonksyon nou an pou byen vit rantre plizyè kat Sass ansanm nan yon nouvo kat. - Rantre nouvo kat konbine sa a pou pwolonje nenpòt sèvis piblik ak yon
{color}-{level}
non klas.
Men yon egzanp ki jenere sèvis piblik koulè tèks (egzanp, .text-purple-500
) lè l sèvi avèk etap ki anwo yo.
@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";
Sa a pral jenere nouvo .text-{color}-{level}
sèvis piblik pou chak koulè ak nivo. Ou ka fè menm bagay la tou pou nenpòt lòt sèvis piblik ak pwopriyete tou.