सीएसएस चर
तेज आ अग्रगामी डिजाइन आ विकास कें लेल बूटस्ट्रैप कें 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-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 संकलनक बाद Bootstrap घटक केँ किछु बेसिक रिस्टाइलिंग आ विस्तार करबाक अनुमति दैत छी |
हम CSS चर के उपयोग कोना क रहल छी ताहि पर किछु अंतर्दृष्टि के लेल हमर टेबल डॉक्यूमेंटेशन पर एक बेर देखू . हमर नवबार v5.2.0 के रूप मे CSS चर के सेहो उपयोग करैत अछि | हम अपनऽ ग्रिड भर म॑ सीएसएस चर केरऽ उपयोग भी करी रहलऽ छियै-मुख्य रूप स॑ गटरऽ लेली नया ऑप्ट-इन सीएसएस ग्रिड- भविष्य म॑ अधिक घटक उपयोग के साथ आबै वाला छै ।
जब भी संभव हो, हम आधार घटक स्तर पर CSS चर असाइन करब (जैसे, .navbar
navbar आरू ओकरऽ उप-घटक के लेलऽ) । ई कतय आरू कोना अनुकूलित करलऽ जाय, एकरऽ अनुमान लगाबै म॑ कमी आबै छै, आरू भविष्य केरऽ अपडेट म॑ हमरऽ टीम द्वारा आसान संशोधन के अनुमति मिलै छै ।
उपसर्ग
अधिकांश CSS चर एकटा उपसर्ग कें उपयोग करयत छै ताकि अहां कें अपन कोडबेस सं टक्कर सं बचल जा सकय. --
ई उपसर्ग हर CSS चर पर आवश्यक छै के अलावा छै .
$prefix
Sass चर के माध्यम स उपसर्ग के अनुकूलित करू । डिफ़ॉल्ट रूप सँ, ई bs-
(पिछला डैश पर ध्यान दियौ) पर सेट अछि.
उदाहरण के लिये
CSS चर Sass केरऽ चर के समान लचीलापन प्रदान करै छै, लेकिन ब्राउज़र क॑ परोसै स॑ पहल॑ संकलन के जरूरत के बिना । जेना कि यहाँ हम अपनऽ पेज केरऽ फॉन्ट आरू लिंक स्टाइल क॑ CSS वैरिएबल स॑ रीसेट करी रहलऽ छियै ।
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
ग्रिड ब्रेकपॉइंट
जखन कि हम अपन ग्रिड ब्रेकपॉइंट कें CSS चर कें रूप मे शामिल करय छी (क कें छोड़िक कें xs
), ध्यान राखूं कि CSS चर मीडिया क्वेरी मे काज नहि करय छै . इ चर कें लेल CSS spec मे डिजाइन कें द्वारा छै, मुदा चर कें लेल समर्थन कें साथ आबै वाला सालक मे बदल सकय env()
छै. किछु सहायक लिंकक लेल ई स्टैक ओवरफ्लो उत्तर देखू . एहि बीच, अहां एहि चर क उपयोग अन्य सीएसएस स्थिति मे क सकैत छी, संगहि अपन जावास्क्रिप्ट मे सेहो क सकैत छी ।