मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
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 मैप बा। फाइल साइज बढ़े से बचे खातिर हमनी के एह में से हर चर खातिर टेक्स्ट भा बैकग्राउंड कलर क्लास ना बनावेनी जा। एकरा बजाय, हमनी के एगो थीम पैलेट खातिर एह रंगन के एगो सबसेट चुनेनी जा .

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

$नीला रंग के बा#0d6efd के बा
$ नीला-100 के बा
$ नीला-200 के बा
$ नीला-300 के बा
$ नीला-400 के बा
$ नीला-500 के बा
$ नीला-600 के बा
$ नीला-700 के बा
$ नीला-800 के बा
$ नीला-900 के बा
$नील के बा#6610f2 के बा
$ इंडिगो-100 के बा
$नील-200 के बा
$ इंडिगो-300 के बा
$ इंडिगो-400 के बा
$ इंडिगो-500 के बा
$ इंडिगो-600 के बा
$ इंडिगो-700 के बा
$ इंडिगो-800 के बा
$ इंडिगो-900 के बा
$बैंगनी रंग के होला#6f42c1 के बा
$ बैंगनी-100 के बा
$ बैंगनी-200 के बा
$ बैंगनी-300 के बा
$ बैंगनी-400 के बा
$ बैंगनी-500 के बा
$ बैंगनी-600 के बा
$ बैंगनी-700 के बा
$ बैंगनी-800 के बा
$ बैंगनी-900 के बा
$गुलाबी रंग के बा# d63384 के बा
$ गुलाबी-100 के बा
$ गुलाबी-200 के बा
$ गुलाबी-300 के बा
$ गुलाबी-400 के बा
$ गुलाबी-500 के बा
$ गुलाबी-600 के बा
$ गुलाबी-700 के बा
$ गुलाबी-800 के बा
$ गुलाबी-900 के बा
$लाल के बा# dc3545 के बा
$ लाल-100 के बा
$लाल-200 के बा
$ लाल-300 के बा
$ लाल-400 के बा
$ लाल-500 के बा
$ लाल-600 के बा
$ लाल-700 के बा
$ लाल-800 के बा
$ लाल-900 के बा
$नारंगी रंग के बा# fd7e14 के बा
$ नारंगी-100 के बा
$ नारंगी-200 के बा
$ नारंगी-300 के बा
$ नारंगी-400 के बा
$ नारंगी-500 के बा
$ नारंगी-600 के बा
$ नारंगी-700 के बा
$ नारंगी-800 के बा
$ नारंगी-900 के बा
$पीला रंग के होला# ffc107 के बा
$पीला-100 के बा
$पीला-200 के बा
$पीला-300 के बा
$पीला-400 के बा
$पीला-500 के बा
$पीला-600 के बा
$पीला-700 के बा
$पीला-800 के बा
$पीला-900 के बा
$हरे रंग के बा#198754 के बा
$ हरे-100 के बा
$ हरे-200 के बा
$ हरे-300 के बा
$ हरे-400 के बा
$ हरे-500 के बा
$ हरे-600 के बा
$ हरे-700 के बा
$ हरे-800 के बा
$ हरे-900 के बा
$टील के बा# 20c997 के बा
$ टील-100 के बा
$ टील-200 के बा
$ टील-300 के बा
$ टील-400 के बा
$ टील-500 के बा
$ टील-600 के बा
$ टील-700 के बा
$ टील-800 के बा
$ टील-900 के बा
$ सियान के बा#0dcaf0 के बा
$ सियान-100 के बा
$ सियान-200 के बा
$ सियान-300 के बा
$ सियान-400 के बा
$ सियान-500 के बा
$ सियान-600 के बा
$ सियान-700 के बा
$ सियान-800 के बा
$ सियान-900 के बा
$ ग्रे-500 के बा# adb5bd के बा
$ ग्रे-100 के बा
$ ग्रे-200 के बा
$ ग्रे-300 के बा
$ ग्रे-400 के बा
$ ग्रे-500 के बा
$ ग्रे-600 के बा
$ ग्रे-700 के बा
$ ग्रे-800 के बा
$ ग्रे-900 के बा
$काला रंग के बा#000 के बा
$गोरा रंग के बा#fff के बा

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

सास प्रोग्रामेटिक रूप से वैरिएबल जनरेट ना कर सकेला, एहसे हमनी के खुद हर टिंट आ शेड खातिर वैरिएबल मैन्युअल रूप से बनवनी जा। हमनी के मिडपॉइंट वैल्यू (उदाहरण खातिर, ) निर्दिष्ट करेनी जा आ कस्टम कलर फंक्शन के इस्तेमाल सास के कलर फंक्शन $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,
  "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()फंक्शन के इस्तेमाल कई गो सास मैप के जल्दी से एक साथ नया मैप में मर्ज करे खातिर करीं।
  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}उपयोगिता पैदा होखी. रउरा कवनो दोसरा उपयोगिता आ संपत्ति खातिर भी अइसने कर सकेनी.