थीमिंग बूटस्ट्रैप के बा
आसान थीमिंग आ घटक बदलाव खातिर वैश्विक शैली पसंद खातिर हमनी के नया बिल्ट-इन Sass चर के साथ बूटस्ट्रैप 4 के अनुकूलित करीं।
बूटस्ट्रैप 3 में, थीमिंग बहुत हद तक LESS में चर ओवरराइड, कस्टम CSS, आ एगो अलग थीम स्टाइलशीट से संचालित रहे जवना के हमनी के अपना distफाइल में शामिल कइले रहनी जा। कुछ मेहनत से बिना कोर फाइल के छूअले बूटस्ट्रैप 3 के लुक के पूरा तरीका से रिडिजाइन कईल जा सकता। बूटस्ट्रैप 4 एगो परिचित, लेकिन तनिका अलग तरीका देवेला।
अब, थीमिंग के पूरा कइल जाला सास वैरिएबल, सास मैप, आ कस्टम सीएसएस से. अब कवनो समर्पित थीम स्टाइलशीट नइखे; एकरे बजाय, रउआँ बिल्ट-इन थीम के ढाल, छाया आ अउरी बहुत कुछ जोड़े खातिर सक्षम क सकत बानी।
चर, नक्शा, मिक्सिन, आ अउरी बहुत कुछ के लाभ उठावे खातिर हमनी के स्रोत Sass फाइल के उपयोग करीं।
जब भी संभव होखे, बूटस्ट्रैप के कोर फाइल सभ के संशोधित करे से बची। सास खातिर एकर मतलब बा कि आपन स्टाइलशीट बनाईं जवन बूटस्ट्रैप के आयात करी जेहसे कि रउरा ओकरा के संशोधित आ बढ़ा सकीलें. मान लीं कि रउआँ 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झंडा हटाईं। अगर कौनों चर के पहिले से असाइन कइल गइल बा, तब ऊ बूटस्ट्रैप में डिफ़ॉल्ट मान सभ द्वारा फिर से असाइन ना कइल जाई।
एकही सास फाइल के भीतर चर ओवरराइड डिफ़ॉल्ट चर सभ से पहिले भा बाद में आ सके ला। हालाँकि, जब 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:
$theme-colors: map-remove($theme-colors, "success", "info", "danger");बूटस्ट्रैप सास मैप सभ के भीतर कुछ बिसेस कुंजी सभ के मौजूदगी मान लेला जइसे कि हमनी के इस्तेमाल कइले बानी जा आ खुद इनहन के बिस्तार कइले बानी जा। जइसे-जइसे रउआँ शामिल नक्शा सभ के अनुकूलित करीं, रउआँ के अइसन त्रुटि के सामना करे के पड़ सके ला जहाँ कौनों बिसेस 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`
}हमनी के बिल्ट-इन कस्टम चर फाइल के साथ बूटस्ट्रैप 4 के अनुकूलित करीं आ आसानी से नया $enable-*Sass चर के साथ ग्लोबल CSS पसंद के टॉगल करीं। कवनो चर के मान के ओवरराइड करीं आ npm run testजरूरत के हिसाब से के साथ फिर से संकलित करीं।
रउआँ हमनी के _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-hover-media-query |
trueया false(डिफ़ॉल्ट) बा। |
पदावनत हो गइल बा |
$enable-grid-classes |
true(डिफ़ॉल्ट) के रूप में दिहल गइल बाfalse |
ग्रिड सिस्टम खातिर CSS क्लास सभ के जनरेशन के सक्षम करे ला (जइसे कि, .container, .row, .col-md-1, इत्यादि)। |
$enable-caret |
true(डिफ़ॉल्ट) के रूप में दिहल गइल बाfalse |
पर छद्म तत्व कैरेट सक्षम करेला .dropdown-toggle। |
$enable-print-styles |
true(डिफ़ॉल्ट) के रूप में दिहल गइल बाfalse |
प्रिंटिंग के अनुकूलित करे खातिर शैली सभ के सक्षम बनावे ला। |
बूटस्ट्रैप के कई गो बिबिध कंपोनेंट आ यूटिलिटी सभ के निर्माण सास मैप में परिभाषित रंग सभ के एगो सीरीज के माध्यम से कइल गइल बा। एह नक्शा के सास में लूप ओवर कइल जा सके ला ताकि जल्दी से रूलसेट सभ के एगो सीरीज पैदा कइल जा सके।
बूटस्ट्रैप 4 में उपलब्ध सभ रंग, हमनी के scss/_variables.scssफाइल में Sass चर के रूप में उपलब्ध बा अवुरी एगो 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फाइल में Sass चर के रूप में भी उपलब्ध बा आ एगो Sass मैप बा।
ग्रे चर सभ के एगो बिस्तार वाला सेट आ scss/_variables.scssआपके प्रोजेक्ट भर में ग्रे के सुसंगत शेड सभ खातिर एगो Sass मैप में।
के भीतर _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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--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);
}रउआँ आपन मीडिया क्वेरी में हमनी के ब्रेकपॉइंट चर के भी इस्तेमाल कर सकत बानी:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}