Source

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

आसान थीमिंग आरू घटक परिवर्तन के लेलऽ वैश्विक शैली वरीयता के लेलऽ हमरऽ नया अंतर्निहित 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, अहाँ Bootstrap क स्रोत 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";

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

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

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

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

आवश्यक कुंजी

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

उदाहरण के लेल, हम लिंक, बटन, आ फॉर्म स्टेट के लेल 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`
}

सस्स विकल्प

हमरऽ अंतर्निहित कस्टम चर फाइल स॑ बूटस्ट्रैप 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विभिन्न घटक पर पूर्व परिभाषित s सक्षम करैत अछि.
$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-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 मैप आ चर उपलब्ध कराबै के लक्ष्य रखब जेना कि हम नीचा देल गेल ग्रेस्केल रंग के साथ केने छी |

विषय रंग

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

प्राथमिक
माध्यमिक
सफलता
खतरा
चेतावनी
जानकारी
हल्लुक
अन्हार

ग्रेज

ग्रे चर कें एकटा विस्तृत सेट आ scss/_variables.scssअपन प्रोजेक्ट भर मे ग्रे कें सुसंगत शेड्स कें लेल एकटा Sass मैप मे.

१०० के
200 के अछि
300 के अछि
४०० के
500 के अछि
600 के अछि
700 के अछि
800 के अछि
900 के अछि

, के भीतर _variables.scss, अहाँ के हमर रंग चर आ 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, 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 वैरिएबल स॑ रीसेट करी रहलऽ छियै ।

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