रंग
बूटस्ट्रैप एक व्यापक रंग प्रणाली द्वारा समर्थित है जो हमारी शैलियों और घटकों को थीम देता है। यह किसी भी परियोजना के लिए अधिक व्यापक अनुकूलन और विस्तार को सक्षम बनाता है।
थीम रंग
scss/_variables.scssहम रंग योजनाओं को उत्पन्न करने के लिए एक छोटा रंग पैलेट बनाने के लिए सभी रंगों के सबसेट का उपयोग करते हैं, जो बूटस्ट्रैप की फ़ाइल में Sass चर और Sass मानचित्र के रूप में भी उपलब्ध है ।
ये सभी रंग Sass मानचित्र के रूप में उपलब्ध हैं, $theme-colors.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
इन रंगों को कैसे संशोधित किया जाए, इसके लिए हमारे Sass मानचित्र और लूप दस्तावेज़ देखें।
सभी रंग
scss/_variables.scssसभी बूटस्ट्रैप रंग फ़ाइल में Sass चर और Sass मानचित्र के रूप में उपलब्ध हैं । बढ़े हुए फ़ाइल आकार से बचने के लिए, हम इनमें से प्रत्येक वेरिएबल के लिए टेक्स्ट या बैकग्राउंड कलर क्लासेस नहीं बनाते हैं। इसके बजाय, हम थीम पैलेट के लिए इन रंगों का एक सबसेट चुनते हैं ।
रंगों को अनुकूलित करते समय कंट्रास्ट अनुपात की निगरानी करना सुनिश्चित करें। जैसा कि नीचे दिखाया गया है, हमने प्रत्येक मुख्य रंगों में तीन कंट्रास्ट अनुपात जोड़े हैं- एक स्वैच के वर्तमान रंगों के लिए, एक सफेद के खिलाफ, और एक काले रंग के लिए।
Sass पर नोट्स
Sass प्रोग्रामेटिक रूप से चर उत्पन्न नहीं कर सकता है, इसलिए हमने प्रत्येक रंग के लिए मैन्युअल रूप से चर बनाए और स्वयं को छायांकित किया। हम मध्य बिंदु मान निर्दिष्ट करते हैं (उदाहरण के लिए, $blue-500) और Sass के रंग फ़ंक्शन के माध्यम से हमारे रंगों को टिंट (हल्का) या छाया (गहरा) करने के लिए कस्टम रंग फ़ंक्शन का उपयोग करते mix()हैं।
उपयोग करना mix()वैसा नहीं है lighten()और darken()—पूर्व में निर्दिष्ट रंग को सफेद या काले रंग के साथ मिश्रित किया जाता है, जबकि बाद वाला केवल प्रत्येक रंग के हल्केपन को समायोजित करता है। परिणाम रंगों का एक अधिक पूर्ण सूट है, जैसा कि इस कोडपेन डेमो में दिखाया गया है ।
हमारे tint-color()और shade-color()फ़ंक्शन mix()हमारे चर के साथ उपयोग करते $theme-color-intervalहैं, जो हमारे द्वारा उत्पादित प्रत्येक मिश्रित रंग के लिए एक चरणबद्ध प्रतिशत मान निर्दिष्ट करता है। scss/_functions.scssपूर्ण स्रोत कोड के लिए और scss/_variables.scssफ़ाइलें देखें ।
रंग सास नक्शे
बूटस्ट्रैप के स्रोत Sass फ़ाइलों में रंगों की सूची और उनके हेक्स मानों पर तेज़ी से और आसानी से लूप करने में आपकी सहायता करने के लिए तीन मानचित्र शामिल हैं।
$colors500हमारे सभी उपलब्ध आधार ( ) रंगों को सूचीबद्ध करता है$theme-colorsसभी शब्दार्थ नामित थीम रंगों को सूचीबद्ध करता है (नीचे दिखाया गया है)$graysग्रे के सभी रंगों और रंगों को सूचीबद्ध करता है
के भीतर 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,
"black": $black,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
);
कई अन्य घटकों में उनका उपयोग कैसे किया जाता है, इसे अपडेट करने के लिए मानचित्र के भीतर मान जोड़ें, निकालें या संशोधित करें। दुर्भाग्य से इस समय, प्रत्येक घटक इस सास मानचित्र का उपयोग नहीं करता है। भविष्य के अपडेट इस पर सुधार करने का प्रयास करेंगे। ${color}तब तक, चर और इस सास मानचित्र का उपयोग करने की योजना बनाएं।
उदाहरण
यहां बताया गया है कि आप इन्हें अपने Sass में कैसे उपयोग कर सकते हैं:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
रंग मानों को सेट करने और उनका उपयोग करने के लिए रंग और पृष्ठभूमि उपयोगिता वर्ग भी उपलब्ध हैं।colorbackground-color500
जनरेटिंग यूटिलिटीज
v5.1.0 . में जोड़ा गयाबूटस्ट्रैप शामिल नहीं है colorऔर background-colorप्रत्येक रंग चर के लिए उपयोगिताओं, लेकिन आप इन्हें हमारे उपयोगिता एपीआई और हमारे विस्तारित सैस मानचित्रों के साथ v5.1.0 में जोड़ सकते हैं।
- शुरू करने के लिए, सुनिश्चित करें कि आपने हमारे कार्यों, चर, मिश्रण और उपयोगिताओं को आयात किया है।
map-merge-multiple()एक नए मानचित्र में एकाधिक Sass मानचित्रों को एक साथ शीघ्रता से मर्ज करने के लिए हमारे फ़ंक्शन का उपयोग करें ।{color}-{level}किसी भी उपयोगिता को वर्ग नाम के साथ विस्तारित करने के लिए इस नए संयुक्त मानचित्र को मर्ज करें ।
.text-purple-500यहां एक उदाहरण दिया गया है जो उपरोक्त चरणों का उपयोग करके टेक्स्ट कलर यूटिलिटीज (जैसे, ) उत्पन्न करता है ।
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";
.text-{color}-{level}यह हर रंग और स्तर के लिए नई उपयोगिताओं को उत्पन्न करेगा । आप किसी अन्य उपयोगिता और संपत्ति के लिए भी ऐसा ही कर सकते हैं।