मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
Check
in English

CSS चरहरू

छिटो र अगाडि देखिने डिजाइन र विकासको लागि बुटस्ट्र्यापको CSS अनुकूलन गुणहरू प्रयोग गर्नुहोस्।

यस पृष्ठमा

बुटस्ट्र्यापले धेरै CSS अनुकूलन गुणहरू (चर) समावेश गर्दछ यसको कम्पाइल गरिएको CSS मा वास्तविक-समय अनुकूलनको लागि सास पुन: कम्पाइल गर्न आवश्यक छैन। यसले तपाइँको ब्राउजरको इन्स्पेक्टर, कोड स्यान्डबक्स, वा सामान्य प्रोटोटाइपिङमा काम गर्दा हाम्रो विषयवस्तु रङहरू, ब्रेकपोइन्टहरू, र प्राथमिक फन्ट स्ट्याकहरू जस्ता सामान्य रूपमा प्रयोग हुने मानहरूमा सजिलो पहुँच प्रदान गर्दछ।

हाम्रा सबै अनुकूलन गुणहरू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-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 चरमा आवश्यक पर्ने उपसर्गको अतिरिक्त हो।

$prefixSass चर मार्फत उपसर्ग अनुकूलन गर्नुहोस् । पूर्वनिर्धारित रूपमा, यो सेट गरिएको छ bs-(ट्रेलिंग ड्यास नोट गर्नुहोस्)।

उदाहरणहरू

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