Source

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

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

परिचय

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

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

ससस के बा

चर, नक्शा, मिक्सिन, आ अउरी बहुत कुछ के लाभ उठावे खातिर हमनी के स्रोत Sass फाइल के उपयोग करीं। हमनी के बिल्ड में हमनी के Sass राउंडिंग परिशुद्धता के 6 तक बढ़ा देले बानी जा (डिफ़ॉल्ट रूप से इ 5 बा) ताकि ब्राउज़र राउंडिंग के समस्या से बचावल जा सके।

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

जब भी संभव होखे, बूटस्ट्रैप के कोर फाइल सभ के संशोधित करे से बची। सास खातिर एकर मतलब बा कि आपन स्टाइलशीट बनाईं जवन बूटस्ट्रैप के आयात करी जेहसे कि रउरा ओकरा के संशोधित आ बढ़ा सकीलें. मान लीं कि रउआँ 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

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

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

// Optional
@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आपन शुरुआती बिंदु के रूप में इस्तेमाल करीं।

चर डिफ़ॉल्ट हो जाला

बूटस्ट्रैप 4 में हर Sass चर में !defaultफ्लैग शामिल बा जवना से रउआ बूटस्ट्रैप के स्रोत कोड के संशोधित कइले बिना अपना खुद के Sass में चर के डिफ़ॉल्ट मान के ओवरराइड कर सकेनी। जरूरत के हिसाब से चर सभ के कॉपी आ पेस्ट करीं, इनहन के मान सभ के संशोधित करीं आ !defaultझंडा हटाईं। अगर कौनों चर के पहिले से असाइन कइल गइल बा, तब ऊ बूटस्ट्रैप में डिफ़ॉल्ट मान सभ द्वारा फिर से असाइन ना कइल जाई।

रउआँ के बूटस्ट्रैप के चर के पूरा सूची में मिली scss/_variables.scss। कुछ चर के सेट कइल गइल बा null, ई चर तबले गुण के आउटपुट ना करे लें जबले कि ई आपके कॉन्फ़िगरेशन में ओवरराइड ना हो जालें।

एकही सास फाइल के भीतर चर ओवरराइड डिफ़ॉल्ट चर सभ से पहिले भा बाद में आ सके ला। हालाँकि, जब Sass फाइल सभ में ओवरराइड कइल जाला, तब आपके ओवरराइड सभ के बूटस्ट्रैप के Sass फाइल सभ के आयात करे से पहिले आवे के चाहीं।

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

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

बूटस्ट्रैप में कवनो भी चर खातिर जरूरत के हिसाब से दोहराईं, जवना में नीचे दिहल ग्लोबल विकल्प भी शामिल बा।

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

बूटस्ट्रैप 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 बैकग्राउंड इमेज खातिर वर्ण के इस्तेमाल करेनी जा। आईई में बैकग्राउंड इमेज सभ के सही तरीका से रेंडर करे खातिर एह वर्ण सभ के एस्केप करे के जरूरत बा।

जोड़ल आ घटाव के फंक्शन होला

हमनी के 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शैली सभ के सक्षम बनावे ला।
$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(डिफ़ॉल्ट) बा। trueमें हटावे के योजना बनावल गइल कवनो भी पदावनत मिक्सिन आ फंक्शन के इस्तेमाल करत समय चेतावनी देखावे खातिर पर सेट करीं v5।

रंग

बूटस्ट्रैप के कई गो बिबिध कंपोनेंट आ यूटिलिटी सभ के निर्माण सास मैप में परिभाषित रंग सभ के एगो सीरीज के माध्यम से कइल गइल बा। एह नक्शा के सास में लूप ओवर कइल जा सके ला ताकि जल्दी से रूलसेट सभ के एगो सीरीज पैदा कइल जा सके।

सब रंग के बा

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

बूलू
नील के नाम से जानल जाला
बैंगनी
गुलाबी
लाल
संतरा
पियर
हरियर
टील के बा
सियान के बा

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

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

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

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

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

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

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

प्राथमिक
माध्यमिक के बा
सफलता
खतरा
चेतावनी
जानकारी दिहल गइल बा
उजियार
अन्हरिया

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

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

100 के बा
200 के बा
300 के बा
400 के बा
500 के बा
600 के बा
700 के बा
800 के बा
900 के बा

, के भीतर 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", 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);
  }
}