सीएसएस चर ऐ

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

साढ़े सारे कस्टम गुणें गीbs- त्रीयें पार्टी CSS कन्नै टकराव थमां बचने आस्तै उपसर्ग कीता गेदा ऐ।

जड़ चर

इत्थै उनें चर न जेह् ड़े अस शामल करदे आं (ध्यान देओ जे :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 चर तुंदे अपने कोडबेस कन्नै टक्कर थमां बचने आस्तै इक उपसर्ग दा उपयोग करदे न. --एह् उपसर्ग हर CSS चर पर लोड़चदा ऐ इसदे अलावा ऐ .

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

उदाहरण दे

CSS चर Sass दे चर दे समान लचीलापन प्रदान करदे न, पर ब्राउज़र गी परोसने शा पैह् ले संकलन दी लोड़ दे बगैर। मसाल आस्तै, इत्थै अस अपने पेज दे फॉन्ट ते लिंक शैलियें गी CSS चर कन्नै रिसेट करा करदे आं।

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

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

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