सीएसएस चर के बारे में बतावल गइल बा

बूटस्ट्रैप अपना संकलित CSS में कई गो CSS कस्टम प्रॉपर्टी (वेरिएबल) सभ के सामिल करे ला जे रियल-टाइम कस्टमाइजेशन खातिर बिना सास के रिकंपाइल करे के जरूरत के पड़े ला। ई सभ आमतौर पर इस्तेमाल होखे वाला मान सभ जइसे कि हमनी के थीम रंग, ब्रेकपॉइंट, आ प्राथमिक फॉन्ट स्टैक सभ के आसानी से पहुँच प्रदान करे लें जब आपके ब्राउजर के इंस्पेक्टर, कोड सैंडबॉक्स, या सामान्य प्रोटोटाइपिंग में काम करे लें।

हमनी के सभ कस्टम गुण के उपसर्ग के साथbs- दिहल गइल बा ताकि थर्ड पार्टी सीएसएस के साथ टकराव से बचावल जा सके।

जड़ चर के बारे में बतावल गइल बा

इहाँ हमनी के शामिल चर बा (ध्यान दीं कि :rootजरूरी बा) जवना के कहीं भी बूटस्ट्रैप के सीएसएस लोड होखे तक पहुँचल जा सकेला। ई हमनी के फाइल में स्थित बा _root.scssआ हमनी के संकलित dist फाइल में शामिल बा।

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

घटक चर के बारे में बतावल गइल बा

बूटस्ट्रैप 5 में बिबिध घटक सभ खातिर स्थानीय चर के रूप में कस्टम गुण सभ के इस्तेमाल तेजी से हो रहल बा। एह तरीका से हमनी के आपन संकलित CSS के कम करेनी जा, सुनिश्चित करेनी जा कि नेस्टेड टेबल नियर जगहन पर स्टाइल विरासत में ना मिले, आ Sass संकलन के बाद बूटस्ट्रैप घटक सभ के कुछ बेसिक रिस्टाइलिंग आ एक्सटेंडिंग के अनुमति देनी जा।

हमनी के टेबल डॉक्यूमेंटेशन पर एक बार देखल जाव कुछ अंतर्दृष्टि खातिर कि हमनी के CSS चर के उपयोग कईसे कर रहल बानी जा . हमनी के नवबार भी v5.2.0 के रूप में CSS चर के उपयोग करेला। हमनी के अपना ग्रिड भर में CSS चर के भी इस्तेमाल कर रहल बानी जा-मुख्य रूप से गटर खातिर नया ऑप्ट-इन CSS ग्रिड- भविष्य में अउरी घटक के उपयोग आवे वाला बा।

जब भी संभव होखे, हमनी के बेस कंपोनेंट लेवल पर CSS चर असाइन करब जा (जइसे कि, .navbarनवबार आ ओकर सब-कम्पोनेंट खातिर)। एह से कहाँ आ कइसे अनुकूलित कइल जाला एकर अंदाजा लगावल कम हो जाला, आ भविष्य के अपडेट में हमनी के टीम द्वारा आसानी से संशोधन करे के अनुमति मिले ला।

उपसर्ग के बा

अधिकतर CSS चर सभ में उपसर्ग के इस्तेमाल होला जेह से कि आपके खुद के कोडबेस से टक्कर ना होखे। ई उपसर्ग --हर सीएसएस चर पर जवन जरूरी बा ओकरा अलावा बा।

$prefixसास चर के माध्यम से उपसर्ग के अनुकूलित करीं । डिफ़ॉल्ट रूप से, ई bs-(पिछला डैश पर ध्यान दीं) पर सेट कइल गइल बा।

उदाहरण खातिर दिहल गइल बा

CSS चर सभ में Sass के चर सभ नियर लचीलापन मिले ला, बाकी ब्राउजर के परोसल जाए से पहिले संकलन के जरूरत ना पड़े ला। उदाहरण खातिर, इहाँ हमनी के अपना पन्ना के फॉन्ट आ लिंक स्टाइल के CSS चर के साथ रीसेट कर रहल बानी जा।

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

ग्रिड के ब्रेकपॉइंट के बारे में बतावल गइल बा

जबकि हमनी के आपन ग्रिड ब्रेकपॉइंट के CSS चर के रूप में शामिल करेनी जा (S के छोड़ के xs), ध्यान राखीं कि CSS चर मीडिया क्वेरी में काम ना करेला । ई चर सभ खातिर CSS स्पेसिफिकेशन में डिजाइन के अनुसार बा, बाकी चर सभ खातिर सपोर्ट के साथ आवे वाला साल सभ में बदलाव हो सके env()ला। कुछ सहायक लिंक खातिर ई स्टैक ओवरफ्लो जवाब देखीं । एह बीच, रउआँ एह चर सभ के इस्तेमाल अन्य सीएसएस स्थिति सभ में भी क सकत बानी, साथ ही साथ अपना जावास्क्रिप्ट में भी।