in English

थीमिंग बूटस्ट्रैप

आसान थीमिंग आरू घटक परिवर्तन के लेलऽ वैश्विक शैली वरीयता के लेलऽ हमरऽ नया अंतर्निहित Sass चर के साथ बूटस्ट्रैप 4 क॑ ​​अनुकूलित करलऽ जाय ।

परिचय

बूटस्ट्रैप 3 म॑, थीमिंग क॑ काफी हद तलक LESS म॑ चर ओवरराइड, कस्टम CSS, आरू एक अलग थीम स्टाइलशीट स॑ संचालित करलऽ गेलऽ छेलै जेकरा हमन॑ अपनऽ distफाइल म॑ शामिल करल॑ छेलियै । किछु प्रयास स बिना कोर फाइल कए छुने बूटस्ट्रैप 3 क लुक कए पूरा तरह स रिडिजाइन करि सकैत छल । बूटस्ट्रैप 4 एकटा परिचित, मुदा कनि अलग तरीका प्रदान करैत अछि ।

आब, थीमिंग सास वैरिएबल, सास मैप, आ कस्टम सीएसएस द्वारा पूरा कएल जाइत अछि । आब कोनो समर्पित थीम स्टाइलशीट नहिं अछि; एकरऽ बजाय, आप अंतर्निहित थीम क॑ ढाल, छाया आरू बहुत कुछ जोड़ै लेली सक्षम करी सकै छियै ।

सस्स

अपनय संपत्ति पाइपलाइन कें उपयोग करयत Sass कें संकलन करय कें समय चर, नक्शा, मिक्सिन, आ बेसि कें लाभ उठावय कें लेल हमर स्रोत Sass फाइल कें उपयोग करूं.

फाइल संरचना

जखन संभव होयत, बूटस्ट्रैप क कोर फाइल कए संशोधित करबा स बचू. सास के लेल, एकरऽ मतलब छै कि अपनऽ स्टाइलशीट बनाना जे बूटस्ट्रैप क॑ आयात करै छै ताकि आप ओकरा संशोधित करी क॑ विस्तारित करी सक॑ । मानल जाय जे अहाँ npm सन पैकेज प्रबंधक क उपयोग कए रहल छी, अहाँक पास एकटा फाइल संरचना होएत जे एहि तरहेँ देखाएत:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

यदि अहां हमर स्रोत फाइल डाउनलोड केने छी आओर पैकेज प्रबंधक कें उपयोग नहि क रहल छी, त अहां मैन्युअल रूप सं ओहि संरचना कें समान किछु सेटअप करय चाहब, बूटस्ट्रैप कें स्रोत फाइल कें अपन सं अलग राखैत.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

आयात करब

अपन मे custom.scss, अहाँ Bootstrap क स्रोत Sass फाइल आयात करब. अहां लग दूटा विकल्प अछि: बूटस्ट्रैप क सबटा शामिल करू, या अहां क जरूरत क हिस्सा चुनू. हम बाद वाला कें प्रोत्साहित करय छी, हालांकि जागरूक रहूं कि हमर घटक भर मे किछु आवश्यकता आ निर्भरता छै. अहां के हमर प्लगइन के लेल किछ जावास्क्रिप्ट सेहो शामिल करय पड़त.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

ओहि सेटअप के जगह पर, अहां अपन custom.scss. // Optionalजरूरत के हिसाब सं अहां खंड के अंतर्गत बूटस्ट्रैप के किछु हिस्सा जोड़नाय सेहो शुरू क सकय छी . हम सुझाव दैत छी जे अपन फाइल स पूरा आयात ढेर कए bootstrap.scssअपन प्रारंभिक बिंदु क रूप मे उपयोग करू.

चर पूर्वनिर्धारित

बूटस्ट्रैप मे हर Sass चर मे !defaultफ्लैग शामिल छै जे अहां कें बूटस्ट्रैप कें स्रोत कोड कें संशोधित करय कें बिना अपनय Sass मे चर कें डिफ़ॉल्ट मान कें ओवरराइड करय कें अनुमति देयत छै. आवश्यकतानुसार चर क' कॉपी आ पेस्ट करू, ओकर मान संशोधित करू, आओर !defaultझंडा हटाउ. यदि कोनो चर पहिने सँ असाइन कएल गेल अछि, तखन ओकरा बूटस्ट्रैप मे डिफ़ॉल्ट मान द्वारा पुनः असाइन नहि कएल जाएत.

अहाँकेँ बूटस्ट्रैप क चर क पूरा सूची scss/_variables.scss. किछु चर पर सेट कएल गेल अछि null, ई चर गुण आउटपुट नहि करैत अछि जाबत धरि ओ अहाँक विन्यास मे ओवरराइड नहि कएल जाइत अछि.

चर ओवरराइड हमरऽ फंक्शन, चर, आरू मिक्सिन आयात करला के बाद आबै के चाही, लेकिन बाकी आयात स॑ पहल॑ ।

एतय एकटा उदाहरण अछि जे npm क माध्यम स बूटस्ट्रैप आयात आओर संकलित करबा काल background-colorआओर colorक लेल बदलैत अछि:<body>

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

बूटस्ट्रैप मे कोनों चर कें लेल आवश्यक रूप सं दोहराउ, जाहि मे नीचा देल गेल वैश्विक विकल्प शामिल छै.

हमर स्टार्टर प्रोजेक्ट के साथ npm के माध्यम स Bootstrap के साथ शुरू करू ! twbs /bootstrap-npm-starter टेम्पलेट रिपोजिटरी पर जाउ आ देखू जे कोना अपन npm प्रोजेक्ट मे Bootstrap क निर्माण आओर अनुकूलित कएल जाए. Sass कंपाइलर, ऑटोप्रिफिक्सर, स्टाइललिंट, PurgeCSS, आओर बूटस्ट्रैप आइकन शामिल अछि.

नक्शे एवं लूप

बूटस्ट्रैप 4 मे मुट्ठी भर सास मैप, कुंजी मूल्य जोड़ी शामिल छै जे संबंधित सीएसएस कें परिवारक कें उत्पन्न करनाय आसान बनायत छै. हम अपन रंग, ग्रिड ब्रेकपॉइंट, आओर बहुत किछु के लेल Sass नक्शा के उपयोग करैत छी. ठीक Sass चर के तरह, सब Sass नक्शा म॑ !defaultफ्लैग शामिल छै आरू ओकरा ओवरराइड करी क॑ विस्तारित करलऽ जाब॑ सकै छै ।

हमरऽ कुछ सास नक्शा डिफ़ॉल्ट रूप स॑ खाली म॑ मर्ज करलऽ गेलऽ छै । ई कोनो देलऽ गेलऽ सास नक्शा केरऽ आसानी स॑ विस्तार करै लेली करलऽ जाय छै, लेकिन ई कीमत प॑ आबै छै कि नक्शा स॑ वस्तु हटाबै म॑ कनि मुश्किल होय जाय छै ।

नक्शा संशोधित करब

हमरऽ नक्शा म॑ मौजूदा रंग क॑ संशोधित करै लेली $theme-colors, अपनऽ कस्टम Sass फाइल म॑ निम्नलिखित जोड़ऽ:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

नक्शा मे जोड़ू

मे नव रंग $theme-colorsजोड़बाक लेल, नव कुंजी आओर मान जोड़ू:

$theme-colors: (
  "custom-color": #900
);

नक्शा से हटाएँ

$theme-colors, वा कोनो आन नक्शासँ रंग हटाबए लेल , प्रयोग करू map-remove. सावधान रहू जे अहाँ एकरा हमर आवश्यकता आ विकल्पक बीच अवश्य सम्मिलित करू:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

आवश्यक कुंजी

बूटस्ट्रैप सास मैप के भीतर किछु विशिष्ट कुंजी के उपस्थिति के मानैत अछि जेना कि हम सब स्वयं एहि सब के प्रयोग करैत छी आ विस्तार करैत छी | जेना-जेना अहां शामिल नक्शाक कें अनुकूलित करय छी, अहां कें त्रुटि कें सामना करय पड़य छै जतय कोनों विशिष्ट सास नक्शा कें कुंजी कें उपयोग कैल जा रहल छै.

उदाहरण के लेल, हम लिंक, बटन, आ फॉर्म स्टेट के लेल primary, success, आ dangerकुंजी के उपयोग करैत छी | $theme-colorsएहि कुंजी सभक मान बदलब कोनो मुद्दा नहि प्रस्तुत करबाक चाही, मुदा ओकरा हटाबए सँ Sass संकलन समस्या भ' सकैत अछि. अइ दृष्टांतक मे, अहां कें ओय मानक कें उपयोग करय वाला सैस कोड कें संशोधित करय कें होयत.

कार्य

बूटस्ट्रैप कई Sass फंक्शन कें उपयोग करयत छै, लेकिन सामान्य थीमिंग कें लेल केवल एकटा उपसमूह लागू छै. हम रंग नक्शा स मान प्राप्त करबाक लेल तीन फंक्शन शामिल केने छी:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

ई सब आहाँ क॑ Sass मैप स॑ एक रंग चुनै के अनुमति दै छै बहुत हद तलक वैन्हऽ तरह स॑ जेना कि आप v3 स॑ रंग चर के उपयोग कोना करबै ।

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

नक्शा स॑ रंग केरऽ एगो विशेष स्तर प्राप्त करै लेली हमरा पास एगो आरू फंक्शन भी छै । $theme-colorsनकारात्मक स्तर मान रंग हल्का करत, जखन कि उच्च स्तर गहरे रंग क' देत.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

व्यवहार में, आप फंक्शन क॑ कॉल करबै आरू दू पैरामीटर म॑ पास करबै: रंग केरऽ नाम स॑ $theme-colors(जैसे, प्राथमिक या खतरा) आरू एक संख्यात्मक स्तर ।

.custom-element {
  color: theme-color-level(primary, -10);
}

भविष्य म॑ अतिरिक्त फंक्शन जोड़लऽ जाब॑ सकै छै या अतिरिक्त सास मैप लेली स्तर फंक्शन बनाबै लेली अपनऽ खुद के कस्टम Sass, या यहाँ तलक कि एक जेनेरिक भी अगर आप अधिक वर्बोस होना चाहै छियै ।

रंग विपरीतता

एकटा अतिरिक्त फंक्शन जे हम बूटस्ट्रैप मे शामिल करैत छी ओ अछि कलर कंट्रास्ट फंक्शन, color-yiq. इ YIQ रंग स्पेस कें उपयोग करयत छै जे स्वचालित रूप सं निर्दिष्ट आधार रंग कें आधार पर एकटा हल्का ( #fff) या गहरे ( ) कंट्रास्ट रंग वापस करय सकय छै. #111इ फंक्शन विशेष रूप सं मिक्सिन या लूप कें लेल उपयोगी छै जतय अहां कईटा क्लास जेनरेट करय रहल छी.

जेना, हमर $theme-colorsनक्शा स रंग नमूना जेनरेट करबाक लेल:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

एकर उपयोग एक बेर कें कंट्रास्ट जरूरतक कें लेल सेहो कैल जा सकय छै:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

अहां हमर रंग नक्शा फंक्शन के साथ एकटा आधार रंग सेहो निर्दिष्ट क सकय छी:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

एसवीजी से बच

हम escape-svgफंक्शन क उपयोग करकय , और SVG बैकग्राउंड इमेजेज क े ललए वर्ण क े बचने क <े >ललए #| आईई म॑ बैकग्राउंड इमेज क॑ सही तरीका स॑ रेंडर करै लेली ई वर्णऽ क॑ एस्केप करै के जरूरत छै । फंक्शन कें उपयोग करयत समय escape-svg, डाटा यूआरआई कें उद्धृत करनाय आवश्यक छै.

जोड़ू आ घटावक फ़ंक्शन

हम CSS फंक्शन क॑ लपेटै लेली addआरू फंक्शन केरऽ उपयोग करै छियै । इन फंक्शनों का प्राथमिक उद्देश्य त्रुटियों से बचना है जब एक “यूनिटलेस” मान एक अभिव्यक्ति में पास ककया जाता है | जेना अभिव्यक्ति सभ ब्राउज़र मे त्रुटि वापस करत, गणितीय रूप सँ सही हेबाक बावजूद.subtractcalc0calccalc(10px - 0)

उदाहरण जतय कैलक मान्य अछि:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

उदाहरण जहाँ calc अमान्य अछि:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

सस्स विकल्प

हमरऽ अंतर्निहित कस्टम चर फाइल स॑ बूटस्ट्रैप 4 क॑ ​​अनुकूलित करी क॑ नया $enable-*Sass चर स॑ वैश्विक CSS वरीयता क॑ आसानी स॑ टॉगल करी सकै छियै । कोनो चर क मान कए ओवरराइड करू आओर npm run testजरूरत क अनुसार क संग पुनः संकलित करू.

scss/_variables.scssअहां बूटस्ट्रैप कें फाइल मे प्रमुख वैश्विक विकल्पक कें लेल इ चर कें खोज आ अनुकूलित कयर सकय छी .

चर वाला मूल्य वर्णन
$spacer 1rem(पूर्वनिर्धारित), अथवा कोनो मान > 0 प्रोग्रामेटिक रूप स हमर स्पेसर उपयोगिताक उत्पन्न करबाक लेल डिफ़ॉल्ट स्पेसर मान निर्दिष्ट करैत अछि .
$enable-rounded true(डिफ़ॉल्ट) याfalse border-radiusविभिन्न घटक पर पूर्व परिभाषित शैली सक्षम करैत अछि.
$enable-shadows trueअथवा false(पूर्वनिर्धारित) . box-shadowविभिन्न घटक पर पूर्व परिभाषित सजावटी शैली कें सक्षम करयत छै. box-shadowफोकस राज्यक कें लेल उपयोग कैल गेलय s कें प्रभावित नहि करयत छै.
$enable-gradients trueअथवा false(पूर्वनिर्धारित) . background-imageविभिन्न घटकक पर शैलीक कें माध्यम सं पूर्व परिभाषित ढाल कें सक्षम करयत छै.
$enable-transitions true(डिफ़ॉल्ट) याfalse transitionविभिन्न घटक पर पूर्व परिभाषित s सक्षम करैत अछि.
$enable-prefers-reduced-motion-media-query true(डिफ़ॉल्ट) याfalse prefers-reduced-motionमीडिया क्वेरी कें सक्षम करयत छै , जे उपयोगकर्ताक कें ब्राउज़र/ऑपरेटिंग सिस्टम वरीयताक कें आधार पर किच्छू एनीमेशन/संक्रमण कें दबायत छै.
$enable-hover-media-query trueअथवा false(पूर्वनिर्धारित) . अप्रचलित
$enable-grid-classes true(डिफ़ॉल्ट) याfalse .containerग्रिड सिस्टम (जैना, , .row, .col-md-1, आदि) कें लेल CSS वर्गक कें जनरेशन कें सक्षम करयत छै .
$enable-caret true(डिफ़ॉल्ट) याfalse पर छद्म तत्व caret सक्षम करैत अछि .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(डिफ़ॉल्ट) याfalse गैर-अक्षम बटन तत्वों मे “हाथ” कर्सर जोड़ें |
$enable-print-styles true(डिफ़ॉल्ट) याfalse मुद्रण कें अनुकूलित करय कें लेल शैली कें सक्षम बनायत छै.
$enable-responsive-font-sizes trueअथवा false(पूर्वनिर्धारित) . उत्तरदायी फॉन्ट आकार सक्षम करैत अछि .
$enable-validation-icons true(डिफ़ॉल्ट) याfalse background-imageसत्यापन राज्यक कें लेल पाठ्य इनपुट आ किछु कस्टम फॉर्म कें भीतर आइकन कें सक्षम करयत छै.
$enable-deprecation-messages true(डिफ़ॉल्ट) याfalse पर सेट करू falseचेतावनी नुकाबय लेल जखन कोनो अप्रचलित मिक्सिन आओर फ़ंक्शन क उपयोग करैत अछि जे मे हटाबय क योजना अछि v5.

रंग

बूटस्ट्रैप केरऽ बहुत सारा विभिन्न घटक आरू उपयोगिता क॑ एक सास मैप म॑ परिभाषित रंगऽ के एक श्रृंखला के माध्यम स॑ बनलऽ छै । इ नक्शा कें सास मे लूप ओवर कैल जा सकय छै ताकि जल्दी सं नियम सेट कें एकटा श्रृंखला उत्पन्न कैल जा सकय.

सब रंग

बूटस्ट्रैप 4 म॑ उपलब्ध सब रंग, Sass चर आरू scss/_variables.scssफाइल म॑ एक Sass मैप के रूप म॑ उपलब्ध छै । एकरा बाद केरऽ छोटऽ रिलीज म॑ विस्तारित करलऽ जैतै ताकि अतिरिक्त शेड्स जोड़लऽ जाय सक॑, ठीक वैन्हऽ तरह स॑ जे ग्रेस्केल पैलेट क॑ हम्मं॑ पहिने स॑ शामिल करलऽ गेलऽ छै ।

$ नीले रंग के # 007bff
$नील # 6610f2
$बैंगनी # 6f42c1
$गुलाबी # ई83ई8सी
$लाल # dc3545
$नारंगी # fd7e14 के
$पीला # ffc107
$ हरियर # 28क745
$ टील # 20c997
$ सियान # 17a2b8

एतय अहाँ अपन Sass मे एहि सभक उपयोग कोना क सकैत छी:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

सेटिंगcolor आ background-color. _

भविष्य में, हम प्रत्येक रंग के शेड के लेल Sass मैप आ चर उपलब्ध कराबै के लक्ष्य रखब जेना कि हम नीचा देल गेल ग्रेस्केल रंग के साथ केने छी |

विषय रंग

हम सब रंगक कें एकटा सबसेट कें उपयोग रंग योजनाक कें जनरेट करय कें लेल एकटा छोट रंग पैलेट बनावा कें लेल करय छै, जे Sass चर कें रूप मे सेहो उपलब्ध छै आ बूटस्ट्रैप कें scss/_variables.scssफाइल मे एकटा Sass मैप.

$ प्राथमिक # 007bff
$ माध्यमिक # 6c757d
$सफलता # 28क745
$खतरा # dc3545
$चेतावनी # ffc107
$ जानकारी # 17a2b8
$प्रकाश # f8f9fa
$अन्हार # 343क40

ग्रेज

ग्रे चर कें एकटा विस्तृत सेट आ scss/_variables.scssअपन प्रोजेक्ट भर मे ग्रे कें सुसंगत शेड्स कें लेल एकटा Sass मैप मे. ध्यान रहे कि ई सब “कूल ग्रे” छै, जे तटस्थ ग्रे के बजाय सूक्ष्म नीले रंग के टोन के तरफ झुकाव रखै छै.

$ ग्रे-100 के # f8f9fa
$ ग्रे-200 के # ई9ईसेफ
$ ग्रे-300 के # डीई2ई6
$ ग्रे-400 के # ced4da
$ ग्रे-500 के # adb5bd
$ ग्रे-600 के # 6c757d
$ ग्रे-700 के # 495057
$ ग्रे-800 के # 343क40
$ ग्रे-900 के # 212529

, के भीतर scss/_variables.scss, अहाँ के Bootstrap के रंग चर आओर Sass नक्शा भेटत. $colorsसास नक्शाक एकटा उदाहरण प्रस्तुत अछि :

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

नक्शा के भीतर मान जोड़ू, हटाउ, या संशोधित करू ताकि अद्यतन कएल जा सकय जे ओकर उपयोग बहुत रास अन्य घटक मे कोना कएल जाइत अछि. दुर्भाग्यवश एहि समय हर घटक एहि सास नक्शाक उपयोग नहि करैत अछि । भविष्य मे अपडेट एहि पर सुधार करबाक प्रयास करत। ता धरि ${color}चर आ एहि सस मैप क उपयोग करबाक योजना बनाउ।

घटक

बूटस्ट्रैप केरऽ बहुत सारा घटक आरू उपयोगिता @eachलूप के साथ बनलऽ छै जे सस मैप प॑ पुनरावृत्ति करै छै । इ विशेष रूप सं हमर द्वारा कोनों घटक कें $theme-colorsवेरिएंट उत्पन्न करय कें लेल आ प्रत्येक ब्रेकपॉइंट कें लेल उत्तरदायी वेरिएंट बनावा कें लेल सहायक छै. जेना-जेना आहाँ ई सस मैप क अनुकूलित करब आ पुनः संकलित करब, अहाँ स्वतः अपन परिवर्तन एहि लूप मे परिलक्षित देखब.

संशोधक

बूटस्ट्रैप केरऽ बहुत सारा घटकऽ क॑ बेस-मोडिफायर क्लास एप्रोच स॑ बनलऽ छै । एकरऽ मतलब छै कि स्टाइलिंग केरऽ थोक हिस्सा एक आधार वर्ग (जैसे, .btn) तलक समाहित छै जबकि शैली भिन्नता संशोधक वर्ग (जैसे, .btn-danger) तलक सीमित छै । ई संशोधक वर्ग $theme-colorsनक्शा स॑ बनलऽ छै ताकि हमरऽ संशोधक वर्गऽ के संख्या आरू नाम क॑ अनुकूलित करलऽ जाय सक॑ ।

एतय दूटा उदाहरण देल गेल अछि जे हम कोना मैप पर लूप क घटक आ अपन सब बैकग्राउंड यूटिलिटीज $theme-colorsके मोडिफायर जेनरेट करैत छी |.alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

प्रतिक्रियाशील

ई सास लूप रंगीन नक्शा धरि सीमित नहिं अछि, सेहो. अहां अपन घटक या उपयोगिताक कें उत्तरदायी भिन्नताक कें सेहो उत्पन्न कयर सकय छी. उदाहरण के लेल हमरऽ रिस्पांसिव टेक्स्ट एलाइन्मेंट यूटिलिटीज क॑ ली जहां हम एक मीडिया क्वेरी शामिल के साथ Sass मैप के @eachलेलऽ एक लूप क॑ मिक्स करै छियै ।$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

यदि अहां कें अपन , संशोधित करय कें जरूरत होबाक चाही $grid-breakpoints, अहां कें परिवर्तन ओय नक्शा पर पुनरावृत्ति करय वाला सब लूप पर लागू होयत.

सीएसएस चर

बूटस्ट्रैप 4 मे अपन संकलित सीएसएस मे लगभग दू दर्जन सीएसएस कस्टम गुण (चर) शामिल छै. इ अहां कें ब्राउज़र कें इंस्पेक्टर, एकटा कोड सैंडबॉक्स, या सामान्य प्रोटोटाइपिंग मे काज करय कें समय हमर थीम रंग, ब्रेकपॉइंट, आ प्राथमिक फॉन्ट स्टैक जैना आमतौर पर उपयोग कैल जाय वाला मानक कें आसान पहुंच प्रदान करय छै.

उपलब्ध चर

एतय हम शामिल चर अछि (ध्यान राखू जे the :rootआवश्यक अछि)। _root.scssओ सभ हमर फाइल मे स्थित अछि ।

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

उदाहरण के लिये

CSS चर Sass केरऽ चर के समान लचीलापन प्रदान करै छै, लेकिन ब्राउज़र क॑ परोसै स॑ पहल॑ संकलन के जरूरत के बिना । जेना कि यहाँ हम अपनऽ पेज केरऽ फॉन्ट आरू लिंक स्टाइल क॑ CSS वैरिएबल स॑ रीसेट करी रहलऽ छियै ।

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

ब्रेकपॉइंट चर

जबकक हम मूल रूप स अपनय CSS चर (जैसे, --breakpoint-md) म ं॑ ब्रेकपॉइंट क॑ शामिल करलकै , ई सब मीडिया क्वेरी म ं॑ समर्थित नै छै , लेकिन एकरऽ उपयोग अभी भी मीडिया क्वेरी म ं॑ रूलसेट के भीतर करलऽ जाब॑ सकै छै । इ ब्रेकपॉइंट चर बैकवर्ड संगतता कें लेल संकलित सीएसएस मे रहय छै जखन कि एकर उपयोग जावास्क्रिप्ट द्ववारा कैल जा सकय छै. स्पेसिफिकेशन मे बेसी जानू .

जे समर्थित नहि अछि ओकर एकटा उदाहरण प्रस्तुत अछि :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

आ एकर एकटा उदाहरण प्रस्तुत अछि जे की समर्थित अछि:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}