मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
in English

रंग

बूटस्ट्रैप गी इक व्यापक रंग प्रणाली कन्नै समर्थत कीता गेदा ऐ जेह् ड़ा साढ़ी शैलियें ते घटकें गी थीम दिंदा ऐ। एह् कुसै बी परियोजना लेई होर व्यापक अनुकूलन ते विस्तार गी सक्षम बनांदा ऐ।

थीम रंग

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

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

$नीले रंग दा# 0 डी 6 एफ डी
$ नीले-100 दा
$ नीले-200 दा
$ नीले-300 दा
$ नीले-400 दा
$ नीले-500 दा
$ नीले-600 दा
$ नीले-700 दा
$ नीले-800 दा
$ नीले-900 दा
$नील दा# 6610एफ 2 ऐ
$ इंडिगो-100 ऐ
$नील-200 दा
$नील-300 दा
$ इंडिगो-400 ऐ
$ इंडिगो-500 ऐ
$ इंडिगो-600 ऐ
$ इंडिगो-700 ऐ
$ इंडिगो-800 ऐ
$ इंडिगो-900 ऐ
$बैंगनी रंग दा# 6f42c1 ऐ
$ बैंगनी-100 दा
$ बैंगनी-200 दा
$ बैंगनी-300 दा
$ बैंगनी-400 दा
$ बैंगनी-500 दा
$ बैंगनी-600 दा
$ बैंगनी-700 दा
$ बैंगनी-800 दा
$ बैंगनी-900 दा
$ गुलाबी रंग दा# डी 63384 ऐ
$ गुलाबी-100 दा
$ गुलाबी-200 दा
$ गुलाबी-300 दा
$ गुलाबी-400 दा
$ गुलाबी-500 दा
$ गुलाबी-600 दा
$ गुलाबी-700 दा
$ गुलाबी-800 दा
$ गुलाबी-900 दा
$लाल# डीसी3545 ऐ
$लाल-100 ऐ
$लाल-200 दा
$लाल-300 दा
$ लाल-400 ऐ
$ लाल-500 ऐ
$ लाल-600 ऐ
$ लाल-700 ऐ
$ लाल-800 ऐ
$ लाल-900 ऐ
$नारंगी रंग दा# एफडी7ई14 ऐ
$ नारंगी-100 ऐ
$ नारंगी-200 दा
$ नारंगी-300 ऐ
$ नारंगी-400 ऐ
$ नारंगी-500 ऐ
$ नारंगी-600 ऐ
$ नारंगी-700 ऐ
$ नारंगी-800 ऐ
$ नारंगी-900 ऐ
$पीले रंग दा# एफएफसी107 ऐ
$पीला-100 दा
$पीला-200 दा
$पीला-300 दा
$पीला-400 दा
$पीला-500 दा
$ पीला-600 दा
$ पीला-700 दा
$ पीला-800 दा
$ पीला-900 दा
$हरे रंग दा# 198754 ऐ
$ हरा-100 दा
$ हरा-200 दा
$ हरा-300 दा
$ हरे-400 दा
$ हरा-500 दा
$ हरे-600 दा
$ हरे-700 दा
$ हरे-800 दा
$ हरा-900 दा
$टील करना# 20 सी997 ऐ
$ टील-100 दा
$ टील-200 दा
$ टील-300 दा
$ टील-400 दा
$ टील-500 दा
$ टील-600 दा
$ टील-700 दा
$ टील-800 दा
$ टील-900 दा
$ सियान# 0डीकैफ0 ऐ
$ सियान-100 ऐ
$ सियान-200 ऐ
$ सियान-300 ऐ
$ सियान-400 ऐ
$ सियान-500 ऐ
$ सियान-600 ऐ
$ सियान-700 ऐ
$ सियान-800 ऐ
$ सियान-900 ऐ
$ ग्रे-500 ऐ# एडब5बीडी
$ ग्रे-100 ऐ
$ ग्रे-200 दा
$ ग्रे-300 दा
$ ग्रे-400 ऐ
$ ग्रे-500 ऐ
$ ग्रे-600 ऐ
$ ग्रे-700 ऐ
$ ग्रे-800 ऐ
$ ग्रे-900 ऐ
$ काला# 000 ऐ
$गोरा# फ़्फ़्फ़

सस्स पर नोट्स

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,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

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

मसाल

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

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

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

उपयोगिताएं पैदा करना

v5.1.0 च जोड़ेआ गेआ

बूटस्ट्रैप च हर रंग चर आस्तै 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/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}इस कन्नै हर रंग ते स्तर आस्तै नमीं उपयोगिताएं पैदा होङन । तुस कुसै बी होर उपयोगिता ते संपत्ति आस्तै बी इ'यै करी सकदे ओ।