رەڭ

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 دىكى خاتىرىلەر

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,
  "black":      $black,
  "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/maps";
@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}ھەر بىر رەڭ ۋە سەۋىيىگە يېڭى ئىقتىدارلارنى بارلىققا كەلتۈرىدۇ. سىز باشقا ھەرقانداق پايدىلىنىش ۋە مۈلۈك ئۈچۈنمۇ شۇنداق قىلالايسىز.