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

CSS व्हेरिएबल्स

जलद आणि अग्रेषित डिझाइन आणि विकासासाठी बूटस्ट्रॅपचे CSS सानुकूल गुणधर्म वापरा.

या पृष्ठावर

बूटस्ट्रॅपमध्ये अनेक CSS सानुकूल गुणधर्म (व्हेरिएबल्स) त्याच्या संकलित CSS मध्ये रिअल-टाइम कस्टमायझेशनसाठी Sass पुन्हा कंपाइल न करता समाविष्ट आहेत. तुमच्या ब्राउझरच्या इंस्पेक्टरमध्ये, कोड सँडबॉक्समध्ये किंवा सामान्य प्रोटोटाइपिंगमध्ये काम करताना आमच्या थीमचे रंग, ब्रेकपॉइंट्स आणि प्राथमिक फॉन्ट स्टॅक यासारख्या सामान्यतः वापरल्या जाणार्‍या मूल्यांमध्ये हे सहज प्रवेश प्रदान करतात.

bs-तृतीय पक्ष CSS सह संघर्ष टाळण्यासाठी आमचे सर्व कस्टम गुणधर्म उपसर्ग आहेत .

रूट व्हेरिएबल्स

येथे आम्ही समाविष्ट केलेले व्हेरिएबल्स आहेत (लक्षात ठेवा की ते :rootआवश्यक आहे) ते बूटस्ट्रॅपचे CSS लोड केलेले कोठेही प्रवेश केले जाऊ शकतात. ते आमच्या _root.scssफाइलमध्ये स्थित आहेत आणि आमच्या संकलित केलेल्या डिस्ट फाइल्समध्ये समाविष्ट आहेत.

: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 व्हेरिएबल्स मीडिया क्वेरीमध्ये काम करत नाहीत . हे व्हेरिएबल्ससाठी CSS स्पेसमध्ये डिझाइननुसार आहे, परंतु व्हेरिएबल्सच्या समर्थनासह येत्या काही वर्षांत बदलू शकते env(). काही उपयुक्त दुव्यांसाठी हे स्टॅक ओव्हरफ्लो उत्तर पहा . यादरम्यान, तुम्ही इतर CSS परिस्थितींमध्ये तसेच तुमच्या JavaScript मध्ये हे व्हेरिएबल्स वापरू शकता.