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

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

परिचय

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

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

ससस के बा

अपना खुद के संपत्ति पाइपलाइन के इस्तेमाल से सास के संकलित करत घरी चर, नक्शा, मिक्सिन, आ अउरी बहुत कुछ के लाभ उठावे खातिर हमनी के स्रोत सस फाइल के उपयोग करीं.

फाइल के संरचना के बारे में बतावल गइल बा

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

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

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

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

आयात कइल जा रहल बा

अपना में custom.scss, रउआ बूटस्ट्रैप के स्रोत 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";

ओह सेटअप के जगह पर रखला के बाद, रउआ अपना में कवनो भी Sass चर आ नक्शा के संशोधित करे शुरू कर सकेनी 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 के माध्यम से बूटस्ट्रैप के साथ शुरू करीं! twbs /bootstrap-npm-starter टेम्पलेट रिपोजिटरी पर जाईं आ ई देखीं कि अपना खुद के npm प्रोजेक्ट में बूटस्ट्रैप के कइसे बनावल आ अनुकूलित कइल जाला। एह में सास कंपाइलर, ऑटोप्रिफिक्सर, स्टाइलिंट, पर्जसीएसएस, आ बूटस्ट्रैप आइकन शामिल बा।

नक्शा आ लूप के बारे में बतावल गइल बा

बूटस्ट्रैप 4 में मुट्ठी भर सास मैप, की वैल्यू जोड़ी शामिल बाड़ें जे संबंधित सीएसएस के परिवार सभ के जनरेट कइल आसान बनावे लें। हमनी के अपना रंग, ग्रिड ब्रेकपॉइंट, आ अउरी बहुत कुछ खातिर सास मैप के इस्तेमाल करेनी जा। ठीक सास चर नियर, सभ सास मैप सभ में !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";
...

कुंजी के जरूरत बा

बूटस्ट्रैप सास मैप सभ के भीतर कुछ बिसेस कुंजी सभ के मौजूदगी मान लेला जइसे कि हमनी के इस्तेमाल कइले बानी जा आ खुद इनहन के बिस्तार कइले बानी जा। जइसे-जइसे रउआँ शामिल नक्शा सभ के अनुकूलित करीं, रउआँ के अइसन त्रुटि के सामना करे के पड़ सके ला जहाँ कौनों बिसेस Sass नक्शा के कुंजी के इस्तेमाल हो रहल बा।

उदाहरण खातिर, हमनी के लिंक, बटन, आ फॉर्म स्टेट खातिर primary, success, आ dangerसे के कुंजी के इस्तेमाल करेनी जा। $theme-colorsएह कुंजी सभ के मान बदले से कौनों मुद्दा ना होखे के चाहीं, बाकी इनहन के हटावे से सास संकलन के मुद्दा पैदा हो सके ला। एह दसा सभ में, रउआँ के ओह मान सभ के इस्तेमाल करे वाला सास कोड के संशोधित करे के पड़ी।

काम करेला

बूटस्ट्रैप कई गो सास फंक्शन सभ के इस्तेमाल करे ला, बाकी सामान्य थीमिंग खातिर खाली एगो सबसेट लागू होला। हमनी के रंग नक्शा से मान पावे खातिर तीन गो फंक्शन शामिल कइले बानी जा:

@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);
}

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

रंग के विपरीतता बा

एगो अतिरिक्त फंक्शन हमनी के बूटस्ट्रैप में शामिल करेनी जा, उ ह कलर कंट्रास्ट फंक्शन, 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 फंक्शन के लपेटे खातिर addand फंक्शन के इस्तेमाल करेनी जा । एह फंक्शन सभ के प्राथमिक मकसद ई होला कि जब कौनों एक्सप्रेशन में "यूनिटलेस" मान पास कइल जाला तब त्रुटि से बचे के पड़े । जइसे कि अभिव्यक्ति सभ ब्राउजर सभ में एगो त्रुटि वापस करी, गणितीय रूप से सही होखे के बावजूद।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);
}

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

$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`विभिन्न घटक पर पूर्व परिभाषित एस के सक्षम करेला।
`$enable-prefers-reduced-motion-media-query`	`true`(डिफ़ॉल्ट) के रूप में दिहल गइल बा`false`	`prefers-reduced-motion`मीडिया क्वेरी के सक्षम करे ला , जवन प्रयोगकर्ता लोग के ब्राउजर/ऑपरेटिंग सिस्टम पसंद के आधार पर कुछ खास एनीमेशन/संक्रमण सभ के दबा देला।
`$enable-hover-media-query`	`true`या `false`(डिफ़ॉल्ट) बा।	पदावनत हो गइल बा
`$enable-grid-classes`	`true`(डिफ़ॉल्ट) के रूप में दिहल गइल बा`false`	ग्रिड सिस्टम खातिर CSS क्लास सभ के जनरेशन के सक्षम करे ला (जइसे कि, `.container`, `.row`, `.col-md-1`, इत्यादि)।
`$enable-caret`	`true`(डिफ़ॉल्ट) के रूप में दिहल गइल बा`false`	पर छद्म तत्व कैरेट सक्षम करेला `.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 मैप बा। एकरा के बाद के छोट रिलीज सभ में बिस्तार कइल जाई ताकि अतिरिक्त शेड जोड़ल जा सके, ठीक ओइसहीं जइसे हमनी के पहिले से शामिल ग्रेस्केल पैलेट के।

$नीला रंग के बा #007बीएफएफ के बा

$नील के बा #6610f2 के बा

$बैंगनी रंग के होला #6f42c1 के बा

$गुलाबी रंग के बा # ई83ई8सी के बा

$लाल के बा # dc3545 के बा

$नारंगी रंग के बा # fd7e14 के बा

$पीला रंग के होला # ffc107 के बा

$हरे रंग के बा #28a745 के बा

$टील के बा # 20c997 के बा

$ सियान के बा #17a2b8 के बा

इहाँ रउआ अपना सस में इनहन के इस्तेमाल कईसे कर सकेनी:

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

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

सेट करे खातिर रंग उपयोगिता वर्ग भी उपलब्ध बा colorआ background-color.

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

थीम के रंग के बारे में बतावल गइल बा

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

$ प्राथमिक बा #007बीएफएफ के बा

$माध्यमिक के बा #6c757d के बा

$सफलता के बा #28a745 के बा

$खतरा बा # dc3545 के बा

$चेतावनी बा # ffc107 के बा

$ जानकारी दिहल गइल बा #17a2b8 के बा

$प्रकाश के बा # f8f9fa के बा

$अन्हार हो गइल बा #343a40 के बा

ग्रे रंग के होला

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

$ ग्रे-100 के बा # f8f9fa के बा

$ ग्रे-200 के बा # e9ecef के बा

$ ग्रे-300 के बा #dee2e6 के बा

$ ग्रे-400 के बा # ced4da के बा

$ ग्रे-500 के बा # adb5bd के बा

$ ग्रे-600 के बा #6c757d के बा

$ ग्रे-700 के बा #495057 के बा

$ ग्रे-800 के बा #343a40 के बा

$ ग्रे-900 के बा #212529 के बा

, के भीतर scss/_variables.scss, रउआँ के बूटस्ट्रैप के रंग चर आ सस मैप मिल जाई। इहाँ $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);
}

जवाबदेह बा

ई सास लूप खाली रंगीन नक्शा तक सीमित नइखे, इहो। रउआँ अपना घटक भा उपयोगिता सभ के रिस्पांसिव भिन्नता भी पैदा क सकत बानी। उदाहरण खातिर हमनी के रिस्पांसिव टेक्स्ट एलाइन्मेंट यूटिलिटीज के लीं जहाँ हमनी के एगो मीडिया क्वेरी शामिल के साथ सास मैप @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);
  }
}