थीमिंग बूटस्ट्रॅप
सुलभ थीमिंग आणि घटक बदलांसाठी जागतिक शैली प्राधान्यांसाठी आमच्या नवीन अंगभूत Sass व्हेरिएबल्ससह बूटस्ट्रॅप 4 सानुकूलित करा.
परिचय
बूटस्ट्रॅप 3 मध्ये, थीमिंग मोठ्या प्रमाणात व्हेरिएबल ओव्हरराइड्सद्वारे कमी, सानुकूल CSS आणि वेगळ्या थीम स्टाइलशीटद्वारे चालविली गेली होती जी आम्ही आमच्या dist
फायलींमध्ये समाविष्ट केली होती. काही प्रयत्नांनी, मूळ फाइल्सला स्पर्श न करता बूटस्ट्रॅप 3 चे स्वरूप पूर्णपणे पुन्हा डिझाइन केले जाऊ शकते. बूटस्ट्रॅप 4 एक परिचित, परंतु थोडा वेगळा दृष्टिकोन प्रदान करतो.
आता, थीमिंग Sass व्हेरिएबल्स, Sass नकाशे आणि कस्टम CSS द्वारे पूर्ण केले जाते. यापुढे कोणतीही समर्पित थीम स्टाइलशीट नाही; त्याऐवजी, तुम्ही ग्रेडियंट, सावल्या आणि बरेच काही जोडण्यासाठी अंगभूत थीम सक्षम करू शकता.
सस
तुमची स्वतःची मालमत्ता पाइपलाइन वापरून Sass संकलित करताना व्हेरिएबल्स, नकाशे, मिक्सिन आणि अधिकचा लाभ घेण्यासाठी आमच्या स्त्रोत Sass फाइल्सचा वापर करा.
फाइल संरचना
जेव्हा शक्य असेल तेव्हा, बूटस्ट्रॅपच्या मुख्य फाइल्समध्ये बदल करणे टाळा. Sass साठी, याचा अर्थ बूटस्ट्रॅप आयात करणारी तुमची स्वतःची स्टाइलशीट तयार करणे म्हणजे तुम्ही त्यात सुधारणा आणि विस्तार करू शकता. तुम्ही एनपीएम सारखे पॅकेज मॅनेजर वापरत आहात असे गृहीत धरून, तुमच्याकडे अशी फाइल संरचना असेल जी यासारखी दिसते:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
तुम्ही आमच्या सोर्स फाइल्स डाउनलोड केल्या असतील आणि पॅकेज मॅनेजर वापरत नसाल, तर तुम्हाला बूटस्ट्रॅपच्या सोर्स फाइल्स तुमच्या स्वतःहून वेगळ्या ठेवून त्या स्ट्रक्चरसारखे काहीतरी मॅन्युअली सेटअप करायचे आहे.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
आयात करत आहे
तुमच्या custom.scss
मध्ये, तुम्ही बूटस्ट्रॅपच्या स्रोत Sass फाइल्स आयात कराल. तुमच्याकडे दोन पर्याय आहेत: सर्व बूटस्ट्रॅप समाविष्ट करा किंवा तुम्हाला आवश्यक असलेले भाग निवडा. आम्ही नंतरचे प्रोत्साहन करतो, तरीही लक्षात असू द्या की आमच्या घटकांमध्ये काही आवश्यकता आणि अवलंबित्व आहेत. आमच्या प्लगइनसाठी तुम्हाला काही JavaScript देखील समाविष्ट करणे आवश्यक आहे.
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@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";
त्या सेटअपसह, तुम्ही तुमच्या मधील कोणतेही Sass व्हेरिएबल्स आणि नकाशे सुधारण्यास सुरुवात करू शकता custom.scss
. // Optional
आपण आवश्यकतेनुसार विभाग अंतर्गत बूटस्ट्रॅपचे भाग जोडणे देखील सुरू करू शकता . bootstrap.scss
तुमचा प्रारंभ बिंदू म्हणून आम्ही आमच्या फाईलमधील संपूर्ण आयात स्टॅक वापरण्याचा सल्ला देतो .
व्हेरिएबल डीफॉल्ट
बूटस्ट्रॅपमधील प्रत्येक Sass व्हेरिएबलमध्ये !default
तुम्हाला बूटस्ट्रॅपचा सोर्स कोड न बदलता तुमच्या स्वतःच्या Sass मध्ये व्हेरिएबलचे डीफॉल्ट मूल्य ओव्हरराइड करण्याची परवानगी देणारा ध्वज समाविष्ट असतो. आवश्यकतेनुसार व्हेरिएबल्स कॉपी आणि पेस्ट करा, त्यांची मूल्ये सुधारा आणि !default
ध्वज काढा. जर व्हेरिएबल आधीच नियुक्त केले गेले असेल, तर ते बूटस्ट्रॅपमधील डीफॉल्ट मूल्यांद्वारे पुन्हा नियुक्त केले जाणार नाही.
तुम्हाला मध्ये बूटस्ट्रॅपच्या व्हेरिएबल्सची संपूर्ण यादी मिळेल scss/_variables.scss
. काही व्हेरिएबल्स वर सेट केले आहेत null
, हे व्हेरिएबल्स तुमच्या कॉन्फिगरेशनमध्ये ओव्हरराइड केल्याशिवाय प्रॉपर्टी आउटपुट करत नाहीत.
व्हेरिएबल ओव्हरराइड्स आमची फंक्शन्स, व्हेरिएबल्स आणि मिक्सिन इंपोर्ट केल्यानंतर, पण बाकीच्या इंपोर्टच्या आधी येणे आवश्यक आहे.
येथे एक उदाहरण आहे जे npm द्वारे बूटस्ट्रॅप आयात आणि संकलित करताना आणि background-color
बदलते :color
<body>
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
खालील जागतिक पर्यायांसह, बूटस्ट्रॅपमधील कोणत्याही व्हेरिएबलसाठी आवश्यकतेनुसार पुनरावृत्ती करा.
नकाशे आणि लूप
बूटस्ट्रॅप 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 नकाशेमध्ये काही विशिष्ट की ची उपस्थिती गृहीत धरते कारण आम्ही या स्वतः वापरतो आणि विस्तारित करतो. तुम्ही समाविष्ट केलेले नकाशे सानुकूलित करता तेव्हा, विशिष्ट 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);
}
हे तुम्हाला सास नकाशावरून एक रंग निवडण्याची परवानगी देतात जसे की तुम्ही 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`
}
Escape SVG
आम्ही SVG पार्श्वभूमी प्रतिमांसाठी , आणि वर्ण escape-svg
सुटण्यासाठी फंक्शन वापरतो. IE मध्ये पार्श्वभूमी प्रतिमा योग्यरित्या प्रस्तुत करण्यासाठी या वर्णांना एस्केप करणे आवश्यक आहे. फंक्शन वापरताना , डेटा URI उद्धृत करणे आवश्यक आहे.<
>
#
escape-svg
फंक्शन्स जोडा आणि वजा करा
CSS फंक्शन रॅप करण्यासाठी आम्ही add
आणि फंक्शन्स वापरतो . या फंक्शन्सचा प्राथमिक उद्देश हा आहे की जेव्हा “एकदहीन” मूल्य अभिव्यक्तीमध्ये दिले जाते तेव्हा त्रुटी टाळणे. गणितीयदृष्ट्या बरोबर असूनही, सर्व ब्राउझरमध्ये एरर मिळेल यासारख्या अभिव्यक्ती .subtract
calc
0
calc
calc(10px - 0)
कॅल्क वैध आहे याचे उदाहरण:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
कॅल्क अवैध आहे ते उदाहरण:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
Sass पर्याय
आमच्या अंगभूत कस्टम व्हेरिएबल्स फाइलसह बूटस्ट्रॅप 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 विविध घटकांवर पूर्वनिर्धारित सजावटीच्या शैली सक्षम करते . box-shadow फोकस स्थितींसाठी वापरलेल्या s वर परिणाम होत नाही . |
$enable-gradients |
true किंवा false (डिफॉल्ट) |
background-image विविध घटकांवरील शैलींद्वारे पूर्वनिर्धारित ग्रेडियंट सक्षम करते . |
$enable-transitions |
true (डिफॉल्ट) किंवाfalse |
transition विविध घटकांवर पूर्वनिर्धारित s सक्षम करते . |
$enable-prefers-reduced-motion-media-query |
true (डिफॉल्ट) किंवाfalse |
prefers-reduced-motion मीडिया क्वेरी सक्षम करते , जी वापरकर्त्यांच्या ब्राउझर/ऑपरेटिंग सिस्टम प्राधान्यांवर आधारित काही अॅनिमेशन/संक्रमण दडपते. |
$enable-hover-media-query |
true किंवा false (डिफॉल्ट) |
नापसंत |
$enable-grid-classes |
true (डिफॉल्ट) किंवाfalse |
ग्रिड प्रणालीसाठी CSS वर्गांची निर्मिती सक्षम करते (उदा., .container , .row , .col-md-1 , इ.). |
$enable-caret |
true (डिफॉल्ट) किंवाfalse |
वर छद्म घटक कॅरेट सक्षम करते .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (डिफॉल्ट) किंवाfalse |
अक्षम नसलेल्या बटण घटकांमध्ये "हात" कर्सर जोडा. |
$enable-print-styles |
true (डिफॉल्ट) किंवाfalse |
मुद्रण ऑप्टिमाइझ करण्यासाठी शैली सक्षम करते. |
$enable-responsive-font-sizes |
true किंवा false (डिफॉल्ट) |
प्रतिसादात्मक फॉन्ट आकार सक्षम करते . |
$enable-validation-icons |
true (डिफॉल्ट) किंवाfalse |
background-image मजकूर इनपुटमधील चिन्हे आणि प्रमाणीकरण स्थितींसाठी काही सानुकूल फॉर्म सक्षम करते . |
$enable-deprecation-messages |
true (डिफॉल्ट) किंवाfalse |
false मध्ये काढण्यासाठी नियोजित असलेले कोणतेही बहिष्कृत मिश्रण आणि कार्ये वापरताना चेतावणी लपविण्यासाठी सेट करा v5 . |
रंग
बूटस्ट्रॅपचे बरेचसे विविध घटक आणि उपयुक्तता सास नकाशामध्ये परिभाषित केलेल्या रंगांच्या मालिकेद्वारे तयार केल्या जातात. नियमांची मालिका पटकन व्युत्पन्न करण्यासाठी हा नकाशा 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 नकाशा म्हणून देखील उपलब्ध आहे.
ग्रे
राखाडी व्हेरिएबल्सचा एक विस्तृत संच आणि scss/_variables.scss
तुमच्या संपूर्ण प्रोजेक्टमध्ये राखाडी रंगाच्या सातत्यपूर्ण छटांसाठी एक Sass नकाशा. लक्षात घ्या की हे "कूल ग्रे" आहेत, जे तटस्थ राखाडी ऐवजी सूक्ष्म निळ्या टोनकडे झुकतात.
आत 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
) !default;
इतर अनेक घटकांमध्ये ती कशी वापरली जातात ते अद्यतनित करण्यासाठी नकाशामध्ये मूल्ये जोडा, काढा किंवा सुधारा. दुर्दैवाने यावेळी, प्रत्येक घटक हा Sass नकाशा वापरत नाही. भविष्यातील अद्यतने यामध्ये सुधारणा करण्याचा प्रयत्न करतील. तोपर्यंत, ${color}
व्हेरिएबल्स आणि हा Sass नकाशा वापरण्याची योजना करा.
घटक
बूटस्ट्रॅपचे अनेक घटक आणि युटिलिटिज @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);
}
प्रतिसाद देणारा
हे सास लूप केवळ रंग नकाशांपुरते मर्यादित नाहीत. तुम्ही तुमचे घटक किंवा उपयुक्तता यांच्या प्रतिसादात्मक भिन्नता देखील निर्माण करू शकता. उदाहरणार्थ आमच्या प्रतिसादात्मक मजकूर संरेखन उपयुक्तता घ्या जिथे आम्ही मीडिया क्वेरी समाविष्ट असलेल्या सास नकाशासाठी @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
, तुमचे बदल त्या नकाशावर पुनरावृत्ती होणाऱ्या सर्व लूपवर लागू होतील.
CSS व्हेरिएबल्स
बूटस्ट्रॅप 4 मध्ये त्याच्या संकलित CSS मध्ये सुमारे दोन डझन CSS कस्टम गुणधर्म (व्हेरिएबल्स) समाविष्ट आहेत. तुमच्या ब्राउझरच्या इन्स्पेक्टरमध्ये, कोड सँडबॉक्समध्ये किंवा सामान्य प्रोटोटाइपिंगमध्ये काम करताना आमच्या थीमचे रंग, ब्रेकपॉइंट्स आणि प्राथमिक फॉन्ट स्टॅक यासारख्या सामान्यतः वापरल्या जाणार्या मूल्यांमध्ये हे सहज प्रवेश प्रदान करतात.
उपलब्ध चल
आम्ही समाविष्ट केलेले व्हेरिएबल्स येथे आहेत (लक्षात ठेवा की :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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--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
) ब्रेकपॉइंट्स समाविष्ट केले असताना, हे मीडिया क्वेरीमध्ये समर्थित नाहीत , परंतु तरीही ते मीडिया क्वेरींमधील नियमांमध्ये वापरले जाऊ शकतात . हे ब्रेकपॉइंट व्हेरिएबल्स बॅकवर्ड कंपॅटिबिलिटीसाठी संकलित CSS मध्ये राहतील कारण ते JavaScript द्वारे वापरले जाऊ शकतात. स्पेसमध्ये अधिक जाणून घ्या .
सपोर्ट नसलेल्या गोष्टींचे येथे एक उदाहरण आहे :
@media (min-width: var(--breakpoint-sm)) {
...
}
आणि काय समर्थित आहे याचे एक उदाहरण येथे आहे:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}