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

सीएसएस चर

तेज आ अग्रगामी डिजाइन आ विकास कें लेल बूटस्ट्रैप कें CSS कस्टम गुणक कें उपयोग करूं.

बूटस्ट्रैप न॑ अपनऽ संकलित सीएसएस म॑ बहुत सारा सीएसएस कस्टम गुण (चर) क॑ रियल-टाइम कस्टमाइजेशन लेली शामिल करै छै, जेकरा म॑ सैस क॑ पुनः संकलित करै के जरूरत नै छै । इ अहां कें ब्राउज़र कें निरीक्षक, कोड सैंडबॉक्स, या सामान्य प्रोटोटाइपिंग मे काज करय कें समय हमर थीम रंग, ब्रेकपॉइंट, आ प्राथमिक फॉन्ट स्टैक जैना आमतौर पर उपयोग कैल जाय वाला मानक कें आसान पहुंच प्रदान करय छै.

हमरऽ सब कस्टम गुणऽ के उपसर्ग के साथbs- छै ताकि तृतीय पक्ष सीएसएस के साथ टकराव स॑ बचलऽ जाय सक॑ ।

मूल चर

एतय हम शामिल चर अछि (ध्यान राखू जे :rootआवश्यक अछि) जे कतहु बूटस्ट्रैप के CSS लोड कएल गेल अछि तक पहुँचल जा सकैत अछि | ई सब हमर फाइल मे स्थित अछि _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-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", Arial, "Noto Sans", "Liberation Sans", 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;
}

घटक चर

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

हम CSS चर के उपयोग कोना क रहल छी ताहि पर किछु अंतर्दृष्टि के लेल हमर टेबल डॉक्यूमेंटेशन पर एक बेर देखू .

हम अपनऽ ग्रिड भर म॑ CSS चर के उपयोग भी करी रहलऽ छियै-मुख्य रूप स॑ गटर लेली-भविष्य म॑ अधिक घटक उपयोग के साथ ।

उदाहरण के लिये

CSS चर Sass केरऽ चर के समान लचीलापन प्रदान करै छै, लेकिन ब्राउज़र क॑ परोसै स॑ पहल॑ संकलन के जरूरत के बिना । जेना कि यहाँ हम अपनऽ पेज केरऽ फॉन्ट आरू लिंक स्टाइल क॑ CSS वैरिएबल स॑ रीसेट करी रहलऽ छियै ।

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

ग्रिड ब्रेकपॉइंट

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