رەڭ
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 دىكى خاتىرىلەر
ساس پروگرامما جەھەتتىن ئۆزگەرگۈچى مىقدار ھاسىل قىلالمايدۇ ، شۇڭا بىز ھەر بىر رەڭگە ئۆزگەرگۈچى مىقدارنى ئۆزىمىز قۇردۇق ۋە ئۆزىمىزگە سايە تاشلىدۇق. بىز ئوتتۇرا نۇقتىنىڭ قىممىتىنى بەلگىلەيمىز (مەسىلەن ، $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