थीमिंग बूटस्ट्रैप के बा
आसान थीमिंग आ घटक बदलाव खातिर वैश्विक शैली पसंद खातिर हमनी के नया बिल्ट-इन 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
बूटस्ट्रैप में कवनो भी चर खातिर जरूरत के हिसाब से दोहराईं, जवना में नीचे दिहल ग्लोबल विकल्प भी शामिल बा।
नक्शा आ लूप के बारे में बतावल गइल बा
बूटस्ट्रैप 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 फंक्शन के लपेटे खातिर add
and फंक्शन के इस्तेमाल करेनी जा । एह फंक्शन सभ के प्राथमिक मकसद ई होला कि जब कौनों एक्सप्रेशन में "यूनिटलेस" मान पास कइल जाला तब त्रुटि से बचे के पड़े । जइसे कि अभिव्यक्ति सभ ब्राउजर सभ में एगो त्रुटि वापस करी, गणितीय रूप से सही होखे के बावजूद।subtract
calc
0
calc
calc(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 मैप बा। एकरा के बाद के छोट रिलीज सभ में बिस्तार कइल जाई ताकि अतिरिक्त शेड जोड़ल जा सके, ठीक ओइसहीं जइसे हमनी के पहिले से शामिल ग्रेस्केल पैलेट के।
इहाँ रउआ अपना सस में इनहन के इस्तेमाल कईसे कर सकेनी:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
सेट करे खातिर रंग उपयोगिता वर्ग भी उपलब्ध बा color
आ background-color
.
थीम के रंग के बारे में बतावल गइल बा
हमनी के सभ रंग के एगो सबसेट के इस्तेमाल रंग योजना पैदा करे खातिर एगो छोट रंग पैलेट बनावे खातिर करेनी जा, जवन कि सास चर के रूप में भी उपलब्ध बा आ बूटस्ट्रैप के scss/_variables.scss
फाइल में एगो सास मैप बा।
ग्रे रंग के होला
ग्रे चर सभ के एगो बिस्तार वाला सेट आ scss/_variables.scss
आपके प्रोजेक्ट भर में ग्रे के सुसंगत शेड सभ खातिर एगो Sass मैप में। ध्यान दीं कि ई “कूल ग्रे” हवें, जवन न्यूट्रल ग्रे के बजाय सूक्ष्म नीले रंग के टोन के ओर झुके लें।
, के भीतर 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);
}
}