रंग

थीम के रंग के बारे में बतावल गइल बा

हमनी के सभ रंग के एगो सबसेट के इस्तेमाल रंग योजना पैदा करे खातिर एगो छोट रंग पैलेट बनावे खातिर करेनी जा, जवन कि सास चर के रूप में भी उपलब्ध बा आ बूटस्ट्रैप के scss/_variables.scssफाइल में एगो सास मैप बा।

ई सब रंग सास मैप के रूप में उपलब्ध बा, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

एह रंगन के कइसे संशोधित कइल जाला एकरा खातिर हमनी के सास मैप आ लूप डॉक्स देखीं .

सब रंग के बा

सभ बूटस्ट्रैप रंग Sass चर के रूप में उपलब्ध बा आ scss/_variables.scssफाइल में Sass मैप बा। फाइल साइज बढ़े से बचे खातिर हमनी के एह में से हर चर खातिर टेक्स्ट भा बैकग्राउंड कलर क्लास ना बनावेनी जा। एकरा बजाय, हमनी के एगो थीम पैलेट खातिर एह रंगन के एगो सबसेट चुनेनी जा .

रंग के अनुकूलित करत घरी कंट्रास्ट रेशियो के निगरानी जरूर करीं. जइसे कि नीचे देखावल गइल बा, हमनी के हर मुख्य रंग में तीन गो कंट्रास्ट रेशियो जोड़ले बानी जा- एगो स्वाच के वर्तमान रंग खातिर, एगो सफेद रंग के खिलाफ, आ एगो करिया रंग के खिलाफ।

सस्स पर नोट कइल गइल बा

सास प्रोग्रामेटिक रूप से वैरिएबल जनरेट ना कर सकेला, एहसे हमनी के खुद हर टिंट आ शेड खातिर वैरिएबल मैन्युअल रूप से बनवनी जा। हमनी के मिडपॉइंट वैल्यू (उदाहरण खातिर, ) निर्दिष्ट करेनी जा आ कस्टम कलर फंक्शन के इस्तेमाल सास के कलर फंक्शन $blue-500के माध्यम से अपना रंग के टिंट (हल्का) या शेड (डार्क) करे खातिर करेनी जा ।mix()

प्रयोग आ —पहिला निर्दिष्ट रंग के सफेद भा करिया के साथ मिला देला जबकि दुसरा खाली हर रंग के हल्कापन मान के समायोजित करे ला mix()। एकर परिणाम रंग के बहुत अधिक पूरा सूट बा, जईसे कि ए कोडपेन डेमो में देखावल गईल बा ।lighten()darken()

हमनी tint-color()के आ shade-color()फंक्शन mix()हमनी के चर के संगे-संगे इस्तेमाल करे $theme-color-intervalलें, जवन हमनी के पैदा करे वाला हर मिश्रित रंग खातिर एगो स्टेप कइल प्रतिशत मान निर्दिष्ट करे ला। पूरा स्रोत कोड खातिर scss/_functions.scssआ फाइल सभ के देखल जाय ।scss/_variables.scss

रंग सस के नक्शे के बा

बूटस्ट्रैप के स्रोत सस फाइल में तीन गो मैप शामिल बा जवन रउआ के रंग के सूची आ ओकर हेक्स मान के जल्दी आ आसानी से लूप करे में मदद करी।

• $colorsहमनी के सभ उपलब्ध आधार ( 500) रंग के सूचीबद्ध करेला
• $theme-colorsसभ शब्दार्थ के रूप में नाँव दिहल गइल थीम रंग सभ के लिस्ट बनावे ला (नीचे देखावल गइल बा)
• $graysग्रे के सभ टिंट आ शेड के सूचीबद्ध करेला

, के भीतर scss/_variables.scss, रउआँ के बूटस्ट्रैप के रंग चर आ सस मैप मिल जाई। इहाँ $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
);

नक्शा के भीतर मान सभ के जोड़ल, हटावल, या संशोधित कइल जाय ताकि अपडेट कइल जा सके कि इनहन के इस्तेमाल कई अन्य घटक सभ में कइसे कइल जाला। दुर्भाग्य से एह समय हर घटक एह सस मैप के इस्तेमाल ना करे ला। भविष्य के अपडेट एह पर सुधार करे के कोशिश करी. तब तक ${color}चर आ एह सस मैप के इस्तेमाल करे के योजना बनाईं.

उदाहरण

इहाँ रउआ अपना सस में इनहन के इस्तेमाल कईसे कर सकेनी:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

रंग मान सेट करे आ इस्तेमाल करे खातिर रंग आ बैकग्राउंड यूटिलिटी क्लास भी उपलब्ध बा ।colorbackground-color500

उपयोगिता के जनरेट कइल जा रहल बा

बूटस्ट्रैप में हर रंग चर खातिर colorआ उपयोगिता शामिल नइखे , लेकिन रउआ खुद हमनी के उपयोगिता एपीआई आ v5.1.0 में जोड़ल हमनी के विस्तारित Sass मैप के साथ ई सब जनरेट कर सकेनी।background-color

1. शुरू करे खातिर सुनिश्चित करीं कि रउरा हमनी के फंक्शन, वैरिएबल, मिक्सिन, आ यूटिलिटीज के आयात कइले बानी.
2. हमनी के map-merge-multiple()फंक्शन के इस्तेमाल कई गो सास मैप के जल्दी से एक साथ नया मैप में मर्ज करे खातिर करीं।
3. {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}उपयोगिता पैदा होखी. रउरा कवनो दोसरा उपयोगिता आ संपत्ति खातिर भी अइसने कर सकेनी.