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