रंग
बूटस्ट्रॅपला आमच्या शैली आणि घटकांची थीम असलेल्या विस्तृत रंग प्रणालीद्वारे समर्थित आहे. हे कोणत्याही प्रकल्पासाठी अधिक व्यापक सानुकूलन आणि विस्तार सक्षम करते.
थीम रंग
आम्ही रंग योजना तयार करण्यासाठी एक लहान रंग पॅलेट तयार करण्यासाठी सर्व रंगांचा उपसंच वापरतो, Sass व्हेरिएबल्स आणि बूटस्ट्रॅपच्या scss/_variables.scss
फाइलमध्ये 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
) निर्दिष्ट करतो आणि सासच्या mix()
कलर फंक्शनद्वारे आमचे रंग टिंट (हलके) किंवा सावली (गडद) करण्यासाठी सानुकूल रंग फंक्शन्स वापरतो.
वापरणे mix()
सारखे नसते lighten()
आणि darken()
— पूर्वीचा निर्दिष्ट रंग पांढरा किंवा काळ्या रंगात मिसळतो, तर नंतरचा प्रत्येक रंगाचे फक्त हलकेपणाचे मूल्य समायोजित करतो. या CodePen डेमोमध्ये दर्शविल्याप्रमाणे , परिणाम रंगांचा अधिक संपूर्ण संच आहे .
आमची tint-color()
आणि shade-color()
फंक्शन्स mix()
आमच्या व्हेरिएबलच्या बाजूने वापरतात $theme-color-interval
, जे आम्ही तयार केलेल्या प्रत्येक मिश्रित रंगासाठी चरणबद्ध टक्केवारी मूल्य निर्दिष्ट करते. संपूर्ण स्त्रोत कोडसाठी scss/_functions.scss
आणि फाइल्स पहा .scss/_variables.scss
रंग सास नकाशे
बूटस्ट्रॅपच्या स्त्रोत Sass फाइल्समध्ये तीन नकाशे समाविष्ट आहेत जे तुम्हाला रंगांची सूची आणि त्यांची हेक्स मूल्ये द्रुतपणे आणि सहजपणे लूप करण्यात मदत करतात.
$colors
500
आमच्या सर्व उपलब्ध बेस ( ) रंगांची यादी करते$theme-colors
सर्व शब्दार्थ नावाच्या थीम रंगांची यादी करते (खाली दर्शविलेले)$grays
सर्व रंगछटा आणि राखाडी छटा दाखवतो
आत scss/_variables.scss
, तुम्हाला बूटस्ट्रॅपचे कलर व्हेरिएबल्स आणि सास मॅप मिळेल. $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
);
इतर अनेक घटकांमध्ये ती कशी वापरली जातात ते अद्यतनित करण्यासाठी नकाशामध्ये मूल्ये जोडा, काढा किंवा सुधारा. दुर्दैवाने यावेळी, प्रत्येक घटक हा Sass नकाशा वापरत नाही. भविष्यातील अद्यतने यामध्ये सुधारणा करण्याचा प्रयत्न करतील. तोपर्यंत, ${color}
व्हेरिएबल्स आणि हा Sass नकाशा वापरण्याची योजना करा.
उदाहरण
तुम्ही हे तुमच्या Sass मध्ये कसे वापरू शकता ते येथे आहे:
.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}
रंग मूल्ये सेट करण्यासाठी आणि वापरण्यासाठी रंग आणि पार्श्वभूमी उपयुक्तता वर्ग देखील उपलब्ध आहेत .color
background-color
500