رەڭ
Bootstrap بىزنىڭ ئۇسلۇب ۋە زاپچاسلىرىمىزنى تېما قىلغان كەڭ رەڭ سىستېمىسى تەرىپىدىن قوللىنىدۇ. بۇ ھەر قانداق تۈرنى تېخىمۇ ئەتراپلىق خاسلاشتۇرۇش ۋە كېڭەيتىش ئىمكانىيىتىگە ئىگە قىلىدۇ.
ئۇسلۇب رەڭلىرى
بىز ھەر خىل رەڭلەرنىڭ بىر قىسمىنى ئىشلىتىپ ، رەڭ لايىھىسىنى ھاسىل قىلىش ئۈچۈن كىچىكرەك رەڭلىك پالتا ھاسىل قىلىمىز ، بۇ يەنە Sass ئۆزگەرگۈچى مىقدار ۋە Bootstrap scss/_variables.scss
ھۆججىتىدىكى Sass خەرىتىسى سۈپىتىدە ئىشلىتىلىدۇ.
بۇ رەڭلەرنىڭ ھەممىسىنى Sass خەرىتىسى سۈپىتىدە ئىشلەتكىلى بولىدۇ ، $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
بۇ رەڭلەرنى قانداق ئۆزگەرتىش ئۈچۈن Sass خەرىتىمىز ۋە ئايلانما ھۆججەتلىرىمىزنى تەكشۈرۈپ بېقىڭ .
بارلىق رەڭلەر
بارلىق Bootstrap رەڭلىرى Sass ئۆزگەرگۈچى مىقدار ۋە scss/_variables.scss
ھۆججەتتىكى Sass خەرىتىسى سۈپىتىدە ئىشلىتىلىدۇ. ھۆججەت چوڭلۇقىنىڭ ئېشىپ كېتىشىدىن ساقلىنىش ئۈچۈن ، بىز بۇ ئۆزگەرگۈچى مىقدارلارنىڭ ھەر بىرىگە تېكىست ياكى تەگلىك رەڭ سىنىپى قۇرمايمىز. ئەكسىچە ، بىز بۇ رەڭلەرنىڭ بىر قىسمىنى باشتېما پالتىسى ئۈچۈن تاللايمىز .
رەڭلەرنى تەڭشىگەندە سېلىشتۇرما نىسبىتىنى نازارەت قىلىڭ. تۆۋەندە كۆرسىتىلگەندەك ، بىز ئاساسلىق رەڭلەرنىڭ ھەر بىرىگە ئۈچ خىل سېلىشتۇرما نىسبىتىنى قوشتۇق ، بىرى پاتقاقنىڭ ھازىرقى رەڭگىگە ، بىرى ئاق رەڭگە ، يەنە بىرى قارا رەڭگە.
Sass دىكى خاتىرىلەر
Sass پروگرامما جەھەتتىن ئۆزگەرگۈچى مىقدار ھاسىل قىلالمايدۇ ، شۇڭا بىز ھەر بىر رەڭگە ئۆزگەرگۈچى مىقدارنى ئۆزىمىز قۇردۇق ۋە ئۆزىمىزنى سايە قىلىمىز. بىز ئوتتۇرا نۇقتىنىڭ قىممىتىنى بەلگىلەيمىز (مەسىلەن ، $blue-500
) ھەمدە خاس رەڭ فۇنكسىيەسىنى ئىشلىتىپ Sass نىڭ mix()
رەڭ ئىقتىدارى ئارقىلىق رەڭلىرىمىزنى رەڭلەش (يەڭگىللىتىش) ياكى سايە (قاراڭغۇ) قىلىش ئۈچۈن ئىشلىتىمىز.
ئىشلىتىش mix()
ئوخشاش بولمايدۇ lighten()
ۋە - darken()
ئالدىنقىسى كۆرسىتىلگەن رەڭنى ئاق ياكى قارا بىلەن ئارىلاشتۇرىدۇ ، كېيىنكىسى پەقەت ھەر بىر رەڭنىڭ يېنىكلىك دەرىجىسىنى تەڭشەيدۇ. بۇ CodePen كۆرسەتكۈچىدە كۆرسىتىلگەندەك ، نەتىجە تېخىمۇ مۇكەممەل بولغان بىر يۈرۈش رەڭلەر .
بىزنىڭ tint-color()
ۋە shade-color()
فۇنكسىيەلىرىمىز ئۆزگەرگۈچى مىقدار بىلەن بىللە ئىشلىتىلىدۇ mix()
، $theme-color-interval
بۇ بىز ئىشلەپچىقارغان ھەر بىر ئارىلاش رەڭنىڭ قەدەم باسقۇچلۇق قىممىتىنى بەلگىلەيدۇ. تولۇق كود ئۈچۈن ھۆججەت scss/_functions.scss
ۋە ھۆججەتلەرنى كۆرۈڭ .scss/_variables.scss
رەڭلىك Sass خەرىتىسى
Bootstrap نىڭ مەنبە Sass ھۆججىتى ئۈچ خىل خەرىتىنى ئۆز ئىچىگە ئالغان بولۇپ ، سىزگە رەڭ تىزىملىكى ۋە ئۇلارنىڭ ئالتە تەرەپلىك قىممىتىنى تېز ۋە ئاسان ئايلاندۇرالايسىز.
$colors
بارلىق ئاساسى (500
) رەڭلىرىمىزنى تىزىدۇ$theme-colors
بارلىق مەنىلىك ئاتالغان تېما رەڭلىرىنى تىزىدۇ (تۆۋەندە كۆرسىتىلدى)$grays
كۈلرەڭنىڭ بارلىق رەڭلىرى ۋە رەڭلىرى كۆرسىتىلدى
ئىچىدە scss/_variables.scss
، Bootstrap نىڭ رەڭ ئۆزگەرگۈچى مىقدارلىرى ۋە Sass خەرىتىسىنى تاپالايسىز. بۇ يەردە $colors
ساس خەرىتىسىنىڭ بىر مىسالى:
$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
);
خەرىتە ئىچىدىكى قىممەتلەرنى قوشۇش ، ئۆچۈرۈش ياكى ئۆزگەرتىش ئارقىلىق ئۇلارنىڭ باشقا نۇرغۇن زاپچاسلاردا قانداق ئىشلىتىلىدىغانلىقىنى يېڭىلاڭ. بەختكە قارشى ، بۇ ۋاقىتتا ھەر بىر زاپچاس بۇ Sass خەرىتىسىنى ئىشلىتەلمەيدۇ. كەلگۈسىدىكى يېڭىلانمىلار بۇنىڭدىن كېيىن ياخشىلىنىشقا تىرىشىدۇ. شۇ ۋاقىتقىچە ، ${color}
ئۆزگەرگۈچى مىقدار ۋە بۇ Sass خەرىتىسىنى ئىشلىتىشنى پىلانلاڭ.
مىسال
بۇلارنى Sass دا قانداق ئىشلىتەلەيسىز:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
رەڭ ۋە تەگلىك ئىشلىتىش دەرسلىرىمۇ رەڭ قىممىتىنى تەڭشەش color
ۋە background-color
ئىشلىتىشكە بولىدۇ.500
ئاممىۋى ئەسلىھەلەرنى بارلىققا كەلتۈرۈش
V5.1.0 گە قوشۇلدى
Bootstrap ھەر بىر رەڭ ئۆزگەرگۈچى مىقدارنى ئۆز ئىچىگە ئالمايدۇ color
ۋە ئىشلىتىلمەيدۇ ، ئەمما سىز بۇ ئىقتىدارنى API ۋە v5.1.0 غا قوشۇلغان كېڭەيتىلگەن Sass خەرىتىمىز background-color
ئارقىلىق ئۆزىڭىز ھاسىل قىلالايسىز .
- باشلاش ئۈچۈن بىزنىڭ فۇنكسىيەمىز ، ئۆزگەرگۈچى مىقدار ، ئارىلاشما دېتال ۋە ئەسلىھەلىرىمىزنى ئىمپورتلىغانلىقىڭىزنى جەزملەشتۈرۈڭ.
- فۇنكسىيەمىزنى ئىشلىتىپ
map-merge-multiple()
يېڭى Sass خەرىتىسىنى تېزلىكتە بىرلەشتۈرۈڭ. - بۇ يېڭى بىرلەشتۈرۈلگەن خەرىتىنى بىرلەشتۈرۈپ ،
{color}-{level}
سىنىپ نامى بىلەن ھەر قانداق ئىقتىدارنى كېڭەيتىڭ.
.text-purple-500
بۇ يەردە يۇقارقى باسقۇچلارنى ئىشلىتىپ تېكىست رەڭ قورالى ھاسىل قىلىدىغان بىر مىسال بار .
@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}
ھەر بىر رەڭ ۋە سەۋىيىگە يېڭى ئىقتىدارلارنى بارلىققا كەلتۈرىدۇ. سىز باشقا ھەرقانداق پايدىلىنىش ۋە مۈلۈك ئۈچۈنمۇ شۇنداق قىلالايسىز.