رەڭ

Bootstrap بىزنىڭ ئۇسلۇب ۋە زاپچاسلىرىمىزنى تېما قىلغان كەڭ رەڭ سىستېمىسى تەرىپىدىن قوللىنىدۇ. بۇ ھەر قانداق تۈرنى تېخىمۇ ئەتراپلىق خاسلاشتۇرۇش ۋە كېڭەيتىش ئىمكانىيىتىگە ئىگە قىلىدۇ.

بۇ بەتتە

ئۇسلۇب رەڭلىرى

بىز ھەر خىل رەڭلەرنىڭ بىر قىسمىنى ئىشلىتىپ ، رەڭ لايىھىسىنى ھاسىل قىلىش ئۈچۈن كىچىكرەك رەڭلىك پالتا ھاسىل قىلىمىز ، بۇ يەنە Sass ئۆزگەرگۈچى مىقدار ۋە Bootstrap scss/_variables.scssھۆججىتىدىكى Sass خەرىتىسى سۈپىتىدە ئىشلىتىلىدۇ.

Primary

Secondary

مۇۋەپپەقىيەت

خەتەر

ئاگاھلاندۇرۇش

ئۇچۇر

نۇر

قاراڭغۇ

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

رەڭلەرنى تەڭشىگەندە سېلىشتۇرما نىسبىتىنى نازارەت قىلىشقا كاپالەتلىك قىلىڭ. تۆۋەندە كۆرسىتىلگەندەك ، بىز ئاساسلىق رەڭلەرنىڭ ھەر بىرىگە ئۈچ خىل سېلىشتۇرما نىسبىتىنى قوشتۇق ، بىرى پاتقاقنىڭ ھازىرقى رەڭگىگە ، بىرى ئاق رەڭگە ، يەنە بىرى قارا رەڭگە.

$ كۆك# 0d6efd

$ blue-100

$ blue-200

$ blue-300

$ blue-400

$ blue-500

$ blue-600

$ blue-700

$ blue-800

$ blue-900

$ indigo# 6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ بىنەپشە# 6f42c1

$ سۆسۈن -100

$ بىنەپشە-200

بىنەپشە -300 دوللار

بىنەپشە -400 دوللار

بىنەپشە-500 دوللار

بىنەپشە -600 دوللار

بىنەپشە -700 دوللار

بىنەپشە-800 دوللار

بىنەپشە-900 دوللار

$ ھالرەڭ# d63384

$ pink-100

$ pink-200

$ pink-300

$ pink-400

$ pink-500

$ pink-600

$ pink-700

$ pink-800

$ pink-900

$ red# dc3545

$ red-100

$ red-200

$ red-300

$ red-400

$ red-500

$ red-600

$ red-700

$ red-800

$ red-900

$ ئاپېلسىن# fd7e14

$ orange-100

$ orange-200

$ orange-300

$ orange-400

$ orange-500

$ orange-600

$ orange-700

$ orange-800

$ orange-900

$ سېرىق# ffc107

$ yellow-100

$ yellow-200

$ yellow-300

سېرىق -400 دوللار

$ yellow-500

$ yellow-600

$ yellow-700

$ yellow-800

$ yellow-900

$ green# 198754

$ green-100

$ green-200

$ green-300

$ green-400

$ green-500

$ green-600

$ green-700

$ green-800

$ green-900

$ teal# 20c997

$ teal-100

$ teal-200

$ teal-300

$ teal-400

$ teal-500

$ teal-600

$ teal-700

$ teal-800

$ teal-900

$ cyan# 0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

$ gray-500# adb5bd

$ gray-100

$ gray-200

$ gray-300

$ gray-400

$ gray-500

$ gray-600

$ gray-700

$ gray-800

$ gray-900

$ black# 000

$ ئاق#fff

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