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 मा प्रयोग गर्न सक्नुहुन्छ।