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

आसान थीमिंग और घटक परिवर्तनों के लिए वैश्विक शैली प्राथमिकताओं के लिए हमारे नए अंतर्निहित Sass चर के साथ बूटस्ट्रैप 4 को अनुकूलित करें।

परिचय

बूटस्ट्रैप 3 में, थीम मुख्य रूप से कम, कस्टम सीएसएस, और एक अलग थीम स्टाइलशीट में परिवर्तनीय ओवरराइड द्वारा संचालित थी जिसे हमने अपनी distफाइलों में शामिल किया था। कुछ प्रयासों से, कोई भी मूल फाइलों को छुए बिना बूटस्ट्रैप 3 के रूप को पूरी तरह से नया स्वरूप दे सकता है। बूटस्ट्रैप 4 एक परिचित, लेकिन थोड़ा अलग दृष्टिकोण प्रदान करता है।

अब, थीमिंग Sass वेरिएबल्स, Sass मैप्स और कस्टम CSS द्वारा पूरी की जाती है। कोई और अधिक समर्पित थीम स्टाइलशीट नहीं है; इसके बजाय, आप ग्रेडिएंट, शैडो और बहुत कुछ जोड़ने के लिए बिल्ट-इन थीम को सक्षम कर सकते हैं।

सास

चरों, मानचित्रों, मिश्रणों आदि का लाभ उठाने के लिए हमारे स्रोत Sass फ़ाइलों का उपयोग करें।

फ़ाइल संरचना

जब भी संभव हो, बूटस्ट्रैप की कोर फाइलों को संशोधित करने से बचें। 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";

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

चर चूक

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

आपको बूटस्ट्रैप के चरों की पूरी सूची scss/_variables.scss.

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

हमारे कुछ Sass मानचित्र डिफ़ॉल्ट रूप से खाली में विलय कर दिए जाते हैं। यह किसी दिए गए Sass मानचित्र के आसान विस्तार की अनुमति देने के लिए किया जाता है, लेकिन किसी मानचित्र से आइटम को निकालना थोड़ा अधिक कठिन बनाने की कीमत पर आता है।

नक्शा संशोधित करें

हमारे $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इन चाबियों के मूल्यों को बदलने से कोई समस्या नहीं होनी चाहिए, लेकिन उन्हें हटाने से Sass संकलन समस्याएँ हो सकती हैं। इन उदाहरणों में, आपको उन मानों का उपयोग करने वाले 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 को अतिरिक्त 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आवश्यकतानुसार पुन: संकलित करें।

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

रंग

बूटस्ट्रैप के विभिन्न घटकों और उपयोगिताओं को सैस मानचित्र में परिभाषित रंगों की एक श्रृंखला के माध्यम से बनाया गया है। नियमों की एक श्रृंखला जल्दी से उत्पन्न करने के लिए इस मानचित्र को Sass में लूप किया जा सकता है।

सभी रंग

बूटस्ट्रैप 4 में उपलब्ध सभी रंग Sass चर और 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आपके प्रोजेक्ट में ग्रे के लगातार शेड्स के लिए एक सैस मैप।

100

200

300

400

500

600

700

800

900

के भीतर scss/_variables.scss, आपको बूटस्ट्रैप के रंग चर और Sass मानचित्र मिलेंगे। $colorsयहाँ Sass मानचित्र का एक उदाहरण दिया गया है :

$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लूप के साथ बनाया गया है जो एक Sass मानचित्र पर पुनरावृति करते हैं। यह विशेष रूप से हमारे द्वारा एक घटक $theme-colorsके वेरिएंट बनाने और प्रत्येक ब्रेकपॉइंट के लिए उत्तरदायी वेरिएंट बनाने में मददगार है। जैसे ही आप इन Sass मानचित्रों को अनुकूलित और पुन: संकलित करते हैं, आप स्वचालित रूप से इन लूपों में परिलक्षित अपने परिवर्तन देखेंगे।

संशोधक

बूटस्ट्रैप के कई घटक बेस-संशोधक वर्ग दृष्टिकोण के साथ बनाए गए हैं। इसका मतलब है कि स्टाइल का बड़ा हिस्सा बेस क्लास (जैसे, .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 लूप रंग मानचित्रों तक ही सीमित नहीं हैं। आप अपने घटकों या उपयोगिताओं की प्रतिक्रियाशील विविधताएं भी उत्पन्न कर सकते हैं। उदाहरण के लिए हमारी प्रतिक्रियाशील पाठ संरेखण उपयोगिताओं को लें जहां हम मीडिया क्वेरी के साथ 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 में इसके संकलित सीएसएस में लगभग दो दर्जन सीएसएस कस्टम गुण (चर) शामिल हैं। ये आपके ब्राउज़र के इंस्पेक्टर, कोड सैंडबॉक्स या सामान्य प्रोटोटाइप में काम करते समय हमारे थीम रंग, ब्रेकपॉइंट और प्राथमिक फ़ॉन्ट स्टैक जैसे सामान्य रूप से उपयोग किए जाने वाले मूल्यों तक आसान पहुंच प्रदान करते हैं।

उपलब्ध चर

यहां वे चर शामिल हैं जिन्हें हम शामिल करते हैं (ध्यान दें कि :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);
}

ब्रेकप्वाइंट चर

जबकि हमने मूल रूप से अपने CSS वेरिएबल्स (जैसे, --breakpoint-md) में ब्रेकप्वाइंट शामिल किए थे, ये मीडिया क्वेरीज़ में समर्थित नहीं हैं , लेकिन फिर भी इनका उपयोग मीडिया क्वेरीज़ में नियमों के भीतर किया जा सकता है। ये ब्रेकप्वाइंट वेरिएबल पिछड़े संगतता के लिए संकलित सीएसएस में रहते हैं, क्योंकि इन्हें जावास्क्रिप्ट द्वारा उपयोग किया जा सकता है। विशिष्टता में और जानें।

जो समर्थित नहीं है उसका एक उदाहरण यहां दिया गया है:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

और जो समर्थित है उसका एक उदाहरण यहां दिया गया है:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}