रंग

थीम रंग

अस रंग योजनाएं गी पैदा करने आस्तै इक निक्के रंग पैलेट बनाने आस्तै सारे रंगें दा इक उप-समूह दा उपयोग करदे आं , जेह् ड़ा सैस चर दे रूप च बी उपलब्ध ऐ ते बूटस्ट्रैप दी 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 चर ते फाइल च इक Sass मैप दे रूप च उपलब्ध न . बद्धोबद्ध फाइल आकारें थमां बचने आस्तै, अस इनें चरें च हर इक आस्तै पाठ जां पृष्ठभूमि रंग वर्ग नेईं बनांदे। इसदे बजाय, अस इक थीम पैलेट आस्तै इनें रंगें दा इक उप-समूह चुनने आं .

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

सस्स पर नोट्स

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

इस्तेमाल mix()करना 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, तुसें गी बूटस्ट्रैप दे रंग चर ते 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}चर ते इस सस मैप दा इस्तेमाल करने दी योजना बनाओ।

मसाल

इत्थें तुस अपने सस्स च इन्हें दा इस्तेमाल किस चाल्ली करी सकदे ओ:

.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()इक नमें नक्शे च मते सारे Sass नक्शे गी इक साथ जल्दी मर्ज करने लेई साढ़े फंक्शन दा इस्तेमाल करो।
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}इस कन्नै हर रंग ते स्तर आस्तै नमीं उपयोगिताएं पैदा होङन । तुस कुसै बी होर उपयोगिता ते संपत्ति आस्तै बी इ'यै करी सकदे ओ।