रंग

विषय रंग

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

ई सब रंग सास नक्शा के रूप में उपलब्ध अछि, $theme-colors.

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

ई रंग सब के कोना संशोधित करब ताहि लेल हमर Sass maps आ loops डॉक्स देखू ।

सब रंग

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

रंग अनुकूलित करैत काल कंट्रास्ट रेशियो पर नजरि अवश्य राखू। जेना कि नीचाँ देखाओल गेल अछि, हम मुख्य रंग मे सँ प्रत्येक रंग मे तीन टा कंट्रास्ट रेशियो जोड़ने छी-एकटा स्वाच केर वर्तमान रंगक लेल, एकटा उज्जर रंगक विरुद्ध, आ एकटा कारी रंगक विरुद्ध ।

सस्स पर टिप्पणियाँ

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

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

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

रंग सस नक्शे

बूटस्ट्रैप केरऽ स्रोत 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
);

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

उदाहरण

एतय अहाँ अपन Sass मे एहि सभक उपयोग कोना क सकैत छी:

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

रंग मान सेट करय आरू उपयोग करय लेली रंग आरू पृष्ठभूमि उपयोगिता वर्ग भी उपलब्ध छै.colorbackground-color500

उपयोगिताएँ उत्पन्न करब

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

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}एहि स हर रंग आ स्तर क लेल नव उपयोगिता पैदा होएत । अहां कोनों अन्य उपयोगिता आ संपत्ति कें लेल सेहो इ काज कयर सकय छी.