थीमिंग बूटस्ट्रैप
आसान थीमिंग और घटक परिवर्तनों के लिए वैश्विक शैली प्राथमिकताओं के लिए हमारे नए अंतर्निहित Sass चर के साथ बूटस्ट्रैप 4 को अनुकूलित करें।
बूटस्ट्रैप 3 में, थीम मुख्य रूप से कम, कस्टम सीएसएस, और एक अलग थीम स्टाइलशीट में परिवर्तनीय ओवरराइड द्वारा संचालित थी जिसे हमने अपनी dist
फाइलों में शामिल किया था। कुछ प्रयासों से, कोई भी मूल फाइलों को छुए बिना बूटस्ट्रैप 3 के रूप को पूरी तरह से नया स्वरूप दे सकता है। बूटस्ट्रैप 4 एक परिचित, लेकिन थोड़ा अलग दृष्टिकोण प्रदान करता है।
अब, थीमिंग Sass वेरिएबल्स, Sass मैप्स और कस्टम CSS द्वारा पूरी की जाती है। कोई और अधिक समर्पित थीम स्टाइलशीट नहीं है; इसके बजाय, आप ग्रेडिएंट, शैडो और बहुत कुछ जोड़ने के लिए बिल्ट-इन थीम को सक्षम कर सकते हैं।
चरों, मानचित्रों, मिश्रणों आदि का लाभ उठाने के लिए हमारे स्रोत Sass फ़ाइलों का उपयोग करें।
जब भी संभव हो, बूटस्ट्रैप की कोर फाइलों को संशोधित करने से बचें। Sass के लिए, इसका मतलब है कि अपनी खुद की स्टाइलशीट बनाना जो बूटस्ट्रैप को आयात करता है ताकि आप उसे संशोधित और विस्तारित कर सकें। मान लें कि आप npm जैसे पैकेज मैनेजर का उपयोग कर रहे हैं, आपके पास एक फ़ाइल संरचना होगी जो इस तरह दिखती है:
यदि आपने हमारी स्रोत फ़ाइलें डाउनलोड की हैं और पैकेज प्रबंधक का उपयोग नहीं कर रहे हैं, तो आप बूटस्ट्रैप की स्रोत फ़ाइलों को स्वयं से अलग रखते हुए, उस संरचना के समान कुछ मैन्युअल रूप से सेटअप करना चाहेंगे।
अपने में custom.scss
, आप बूटस्ट्रैप के स्रोत Sass फ़ाइलें आयात करेंगे। आपके पास दो विकल्प हैं: सभी बूटस्ट्रैप शामिल करें, या अपनी ज़रूरत के हिस्सों को चुनें। हम बाद वाले को प्रोत्साहित करते हैं, हालांकि जागरूक रहें कि हमारे घटकों में कुछ आवश्यकताएं और निर्भरताएं हैं। आपको हमारे प्लगइन्स के लिए कुछ जावास्क्रिप्ट भी शामिल करने की आवश्यकता होगी।
उस सेटअप के साथ, आप अपनी custom.scss
. // Optional
आप आवश्यकतानुसार अनुभाग के अंतर्गत बूटस्ट्रैप के कुछ हिस्सों को जोड़ना शुरू कर सकते हैं । हमारा सुझाव है कि आप अपनी bootstrap.scss
फ़ाइल से पूर्ण आयात स्टैक का उपयोग अपने शुरुआती बिंदु के रूप में करें।
बूटस्ट्रैप 4 में प्रत्येक Sass वैरिएबल में !default
फ़्लैग शामिल है जो आपको बूटस्ट्रैप के स्रोत कोड को संशोधित किए बिना अपने स्वयं के Sass में वेरिएबल के डिफ़ॉल्ट मान को ओवरराइड करने की अनुमति देता है। आवश्यकतानुसार चरों को कॉपी और पेस्ट करें, उनके मूल्यों को संशोधित करें और !default
ध्वज को हटा दें। यदि कोई चर पहले ही असाइन किया जा चुका है, तो उसे बूटस्ट्रैप में डिफ़ॉल्ट मानों द्वारा पुन: असाइन नहीं किया जाएगा।
आपको बूटस्ट्रैप के चरों की पूरी सूची scss/_variables.scss
.
उसी Sass फ़ाइल में वैरिएबल ओवरराइड डिफ़ॉल्ट वैरिएबल के पहले या बाद में आ सकता है. हालाँकि, Sass फ़ाइलों में ओवरराइड करते समय, बूटस्ट्रैप की Sass फ़ाइलों को आयात करने से पहले आपके ओवरराइड आने चाहिए।
यहां एक उदाहरण दिया गया है जो npm के माध्यम से बूटस्ट्रैप को आयात और संकलित करते समय background-color
और color
के लिए बदलता है:<body>
नीचे दिए गए वैश्विक विकल्पों सहित, बूटस्ट्रैप में किसी भी चर के लिए आवश्यकतानुसार दोहराएं।
बूटस्ट्रैप 4 में मुट्ठी भर Sass मानचित्र, प्रमुख मूल्य जोड़े शामिल हैं जो संबंधित CSS के परिवारों को उत्पन्न करना आसान बनाते हैं। हम अपने रंगों, ग्रिड ब्रेकप्वाइंट, और बहुत कुछ के लिए Sass मानचित्रों का उपयोग करते हैं। Sass चर की तरह, सभी Sass मानचित्रों में !default
ध्वज शामिल होता है और इसे ओवरराइड और विस्तारित किया जा सकता है।
हमारे कुछ Sass मानचित्र डिफ़ॉल्ट रूप से खाली में विलय कर दिए जाते हैं। यह किसी दिए गए Sass मानचित्र के आसान विस्तार की अनुमति देने के लिए किया जाता है, लेकिन किसी मानचित्र से आइटम को निकालना थोड़ा अधिक कठिन बनाने की कीमत पर आता है।
हमारे $theme-colors
मानचित्र में मौजूदा रंग को संशोधित करने के लिए, अपनी कस्टम Sass फ़ाइल में निम्नलिखित जोड़ें:
में एक नया रंग $theme-colors
जोड़ने के लिए, नई कुंजी और मान जोड़ें:
$theme-colors
, या किसी अन्य मानचित्र से रंग हटाने के लिए , का उपयोग करें map-remove
। सावधान रहें कि आपको इसे हमारी आवश्यकताओं और विकल्पों के बीच सम्मिलित करना होगा:
बूटस्ट्रैप सैस मैप्स के भीतर कुछ विशिष्ट कुंजियों की उपस्थिति को मानता है जैसा कि हमने स्वयं उपयोग किया और इनका विस्तार किया। जब आप शामिल किए गए नक्शों को अनुकूलित करते हैं, तो आपको त्रुटियों का सामना करना पड़ सकता है जहां एक विशिष्ट Sass मानचित्र की कुंजी का उपयोग किया जा रहा है।
उदाहरण के लिए, हम लिंक, बटन और फॉर्म स्टेट्स के लिए primary
, success
, और danger
कीज़ का उपयोग करते हैं। $theme-colors
इन चाबियों के मूल्यों को बदलने से कोई समस्या नहीं होनी चाहिए, लेकिन उन्हें हटाने से Sass संकलन समस्याएँ हो सकती हैं। इन उदाहरणों में, आपको उन मानों का उपयोग करने वाले Sass कोड को संशोधित करना होगा।
बूटस्ट्रैप कई Sass फ़ंक्शंस का उपयोग करता है, लेकिन सामान्य थीमिंग पर केवल एक सबसेट लागू होता है। हमने रंगीन मानचित्रों से मान प्राप्त करने के लिए तीन फ़ंक्शन शामिल किए हैं:
ये आपको Sass मानचित्र से एक रंग चुनने की अनुमति देते हैं जैसे आप v3 से रंग चर का उपयोग कैसे करेंगे।
मानचित्र से एक विशेष स्तर का रंग प्राप्त करने के लिए हमारे पास एक अन्य कार्य भी है $theme-colors
। नकारात्मक स्तर के मान रंग को हल्का करेंगे, जबकि उच्च स्तर गहरे रंग के होंगे।
व्यवहार में, आप फ़ंक्शन को कॉल करेंगे और दो मापदंडों में पास करेंगे: रंग का नाम $theme-colors
(जैसे, प्राथमिक या खतरे) और एक संख्यात्मक स्तर।
अतिरिक्त कार्यों को भविष्य में या आपके स्वयं के कस्टम Sass को अतिरिक्त Sass मानचित्रों के लिए स्तर के कार्यों को बनाने के लिए जोड़ा जा सकता है, या यदि आप अधिक वर्बोज़ बनना चाहते हैं तो एक सामान्य भी।
एक अतिरिक्त फ़ंक्शन जिसे हम बूटस्ट्रैप में शामिल करते हैं, वह है रंग कंट्रास्ट फ़ंक्शन, color-yiq
. यह निर्दिष्ट आधार रंग के आधार पर एक हल्का ( ) या गहरा ( ) कंट्रास्ट रंग स्वचालित रूप से वापस करने के लिए YIQ रंग स्थान का उपयोग करता है। यह फ़ंक्शन विशेष रूप से मिक्सिन या लूप के लिए उपयोगी है जहां आप कई कक्षाएं उत्पन्न कर रहे हैं।#fff
#111
उदाहरण के लिए, हमारे $theme-colors
मानचित्र से रंगीन नमूने उत्पन्न करने के लिए:
इसका उपयोग एकमुश्त कंट्रास्ट आवश्यकताओं के लिए भी किया जा सकता है:
आप हमारे रंग मानचित्र कार्यों के साथ आधार रंग भी निर्दिष्ट कर सकते हैं:
हमारी अंतर्निर्मित कस्टम चर फ़ाइल के साथ बूटस्ट्रैप 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 में कैसे उपयोग कर सकते हैं:
रंग उपयोगिता वर्ग सेटिंग color
और background-color
.
भविष्य में, हम प्रत्येक रंग के रंगों के लिए Sass मानचित्र और चर प्रदान करने का लक्ष्य रखेंगे जैसा कि हमने नीचे ग्रेस्केल रंगों के साथ किया है।
scss/_variables.scss
हम रंग योजनाओं को उत्पन्न करने के लिए एक छोटा रंग पैलेट बनाने के लिए सभी रंगों के सबसेट का उपयोग करते हैं, जो बूटस्ट्रैप की फ़ाइल में Sass चर और Sass मानचित्र के रूप में भी उपलब्ध है ।
ग्रे वेरिएबल्स का एक विस्तृत सेट और scss/_variables.scss
आपके प्रोजेक्ट में ग्रे के लगातार शेड्स के लिए एक सैस मैप।
के भीतर scss/_variables.scss
, आपको बूटस्ट्रैप के रंग चर और Sass मानचित्र मिलेंगे। $colors
यहाँ Sass मानचित्र का एक उदाहरण दिया गया है :
कई अन्य घटकों में उनका उपयोग कैसे किया जाता है, इसे अपडेट करने के लिए मानचित्र के भीतर मान जोड़ें, निकालें या संशोधित करें। दुर्भाग्य से इस समय, प्रत्येक घटक इस सास मानचित्र का उपयोग नहीं करता है। भविष्य के अपडेट इस पर सुधार करने का प्रयास करेंगे। ${color}
तब तक, चर और इस सास मानचित्र का उपयोग करने की योजना बनाएं।
बूटस्ट्रैप के कई घटकों और उपयोगिताओं को @each
लूप के साथ बनाया गया है जो एक Sass मानचित्र पर पुनरावृति करते हैं। यह विशेष रूप से हमारे द्वारा एक घटक $theme-colors
के वेरिएंट बनाने और प्रत्येक ब्रेकपॉइंट के लिए उत्तरदायी वेरिएंट बनाने में मददगार है। जैसे ही आप इन Sass मानचित्रों को अनुकूलित और पुन: संकलित करते हैं, आप स्वचालित रूप से इन लूपों में परिलक्षित अपने परिवर्तन देखेंगे।
बूटस्ट्रैप के कई घटक बेस-संशोधक वर्ग दृष्टिकोण के साथ बनाए गए हैं। इसका मतलब है कि स्टाइल का बड़ा हिस्सा बेस क्लास (जैसे, .btn
) में समाहित है जबकि स्टाइल वेरिएशन मॉडिफायर क्लासेस (जैसे, ) तक ही सीमित है .btn-danger
। ये संशोधक वर्ग $theme-colors
हमारे संशोधक वर्गों की संख्या और नाम को अनुकूलित करने के लिए मानचित्र से बनाए गए हैं।
यहां दो उदाहरण दिए गए हैं कि कैसे हम घटक और हमारी सभी पृष्ठभूमि उपयोगिताओं $theme-colors
के लिए संशोधक उत्पन्न करने के लिए मानचित्र पर लूप करते हैं।.alert
.bg-*
ये Sass लूप रंग मानचित्रों तक ही सीमित नहीं हैं। आप अपने घटकों या उपयोगिताओं की प्रतिक्रियाशील विविधताएं भी उत्पन्न कर सकते हैं। उदाहरण के लिए हमारी प्रतिक्रियाशील पाठ संरेखण उपयोगिताओं को लें जहां हम मीडिया क्वेरी के साथ Sass मानचित्र के @each
लिए एक लूप मिलाते हैं।$grid-breakpoints
यदि आपको अपना संशोधित करने की आवश्यकता है $grid-breakpoints
, तो आपके परिवर्तन उस मानचित्र पर चलने वाले सभी लूपों पर लागू होंगे।
बूटस्ट्रैप 4 में इसके संकलित सीएसएस में लगभग दो दर्जन सीएसएस कस्टम गुण (चर) शामिल हैं। ये आपके ब्राउज़र के इंस्पेक्टर, कोड सैंडबॉक्स या सामान्य प्रोटोटाइप में काम करते समय हमारे थीम रंग, ब्रेकपॉइंट और प्राथमिक फ़ॉन्ट स्टैक जैसे सामान्य रूप से उपयोग किए जाने वाले मूल्यों तक आसान पहुंच प्रदान करते हैं।
यहां वे चर शामिल हैं जिन्हें हम शामिल करते हैं (ध्यान दें कि :root
आवश्यक है)। वे हमारी _root.scss
फाइल में स्थित हैं।
CSS वेरिएबल Sass के वेरिएबल्स के समान लचीलापन प्रदान करते हैं, लेकिन ब्राउज़र में प्रस्तुत किए जाने से पहले संकलन की आवश्यकता के बिना। उदाहरण के लिए, यहां हम अपने पेज के फॉन्ट और लिंक स्टाइल को CSS वेरिएबल के साथ रीसेट कर रहे हैं।
जबकि हमने मूल रूप से अपने CSS वेरिएबल्स (जैसे, --breakpoint-md
) में ब्रेकप्वाइंट शामिल किए थे, ये मीडिया क्वेरीज़ में समर्थित नहीं हैं , लेकिन फिर भी इनका उपयोग मीडिया क्वेरीज़ में नियमों के भीतर किया जा सकता है। ये ब्रेकप्वाइंट वेरिएबल पिछड़े संगतता के लिए संकलित सीएसएस में रहते हैं, क्योंकि इन्हें जावास्क्रिप्ट द्वारा उपयोग किया जा सकता है। विशिष्टता में और जानें।
जो समर्थित नहीं है उसका एक उदाहरण यहां दिया गया है:
और जो समर्थित है उसका एक उदाहरण यहां दिया गया है: