Rawng
Bootstrap hi kan style leh component te theme hmanga siam color system zau tak hmanga support a ni. Hei hian eng project pawh atan customization leh extension kimchang zawk a siam thei a ni.
Theme rawng hrang hrang
Color zawng zawng subset hmangin color scheme siam nan color palette te zawk kan siam a, chu chu Sass variable angin a awm bawk a, Bootstrap scss/_variables.scss
file-ah Sass map pawh a awm bawk.
Heng rawng zawng zawng hi Sass map angin a awm vek a, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Heng colors te hi kan siam danglam dan tur kan Sass maps leh loops docs te hi en la .
Color zawng zawng
Bootstrap color zawng zawng hi Sass variable angin a awm a, scss/_variables.scss
file-ah Sass map a awm bawk. File size tihpun loh nan heng variable tinte tan hian text emaw background color class emaw kan siam lo. Chu ai chuan theme palette atan heng colors te hi subset kan thlang zawk thin .
Color i customize lai hian contrast ratio te chu enfiah ngei ang che. A hnuaia kan hmuh ang hian, main color tinah hian contrast ratio pathum kan dah belh a—swatch-a color awm mekte tan pakhat, pakhat chu against white atan, pakhat chu against black atan.
Sass chungchanga hriat tur pawimawh te
Sass hian programmatically-in variable a siam thei lo va, chuvangin tint leh shade tin atan manual-in kan siam a ni. Midpoint value (eg, $blue-500
) kan tarlang a, Sass-a color function hmangin kan color te tint (lighten) emaw shade (darken) emaw turin custom color function kan mix()
hmang bawk.
Using mix()
is not the same as lighten()
and darken()
—a hmasa zawk chuan a rawng tarlan chu white emaw black emaw nen a blend a, a hnuhnung zawk chuan color tinte lightness value chauh a siamrem thung. Chumi rah chhuah chu colour suite kimchang zawk a ni a, he CodePen demo-a kan hmuh ang hian .
Kan tint-color()
leh shade-color()
function mix()
te hian kan variable bulah kan hmang $theme-color-interval
a, chu chuan kan mixed color siam apiang atan stepped percentage value a tarlang a ni. Source code kimchang chu scss/_functions.scss
and files ah hian en rawh .scss/_variables.scss
Sass maps rawng hrang hrang
Bootstrap source Sass files ah hian map pathum a awm a, chu chuan color list leh an hex value te chu rang tak leh awlsam taka loop over theih a ni.
$colors
kan base (500
) color awm zawng zawng a tarlang vek$theme-colors
semantic taka hming vuah theme color zawng zawng a tarlang vek (a hnuaia tarlan ang hian)$grays
gray tint leh shade zawng zawng a tarlang vek
, chhungah hian scss/_variables.scss
Bootstrap-a color variable leh Sass map te i hmu ang. $colors
Sass map entir nan hetiang hian kan rawn tarlang e :
$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
);
Map chhunga value te chu component dang tam takah hman dan update turin dah belh, paih emaw, siam danglam emaw. Vanduaithlak takin tun dinhmunah chuan component zawng zawng hian he Sass map hi an hmang vek lo. Nakin lawka update lo awm turte chuan hei hi tihchangtlun tumin hma an la ang. Chumi hma chuan ${color}
variable leh he Sass map hi hman dan tur ruahmanna siam rawh.
Entirna
Hengte hi i Sass-a i hman theih dan tur chu hetiang hi a ni:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
Color leh background utility class pawh a awm bawk a , color value te setting color
leh background-color
hman theih a ni bawk.500