उपयुक्तता API
युटिलिटी एपीआय हे युटिलिटी क्लासेस तयार करण्यासाठी सास-आधारित साधन आहे.
बूटस्ट्रॅप युटिलिटिज आमच्या युटिलिटी एपीआय द्वारे व्युत्पन्न केल्या जातात आणि Sass द्वारे युटिलिटी क्लासेसच्या आमच्या डीफॉल्ट सेटमध्ये बदल किंवा विस्तार करण्यासाठी वापरल्या जाऊ शकतात. आमची उपयुक्तता API विविध पर्यायांसह वर्गांची कुटुंबे निर्माण करण्यासाठी Sass नकाशे आणि कार्यांच्या मालिकेवर आधारित आहे. तुम्हाला Sass नकाशे अपरिचित असल्यास, प्रारंभ करण्यासाठी अधिकृत Sass दस्तऐवज वाचा.
नकाशामध्ये आमच्या सर्व उपयुक्तता समाविष्ट आहेत आणि $utilities
नंतर आपल्या सानुकूल नकाशासह विलीन केले जाते $utilities
, जर उपस्थित असेल. युटिलिटी मॅपमध्ये खालील पर्यायांना स्वीकारणार्या युटिलिटी गटांची प्रमुख सूची असते:
पर्याय | प्रकार | वर्णन |
---|---|---|
property |
आवश्यक आहे | मालमत्तेचे नाव, हे स्ट्रिंग किंवा स्ट्रिंगचे अॅरे असू शकते (उदा. क्षैतिज पॅडिंग किंवा समास). |
values |
आवश्यक आहे | मूल्यांची सूची, किंवा जर तुम्हाला वर्गाचे नाव मूल्यासारखे असावे असे वाटत नसेल तर नकाशा. नकाशा null की म्हणून वापरल्यास, ते संकलित केले जात नाही. |
class |
ऐच्छिक | वर्गाच्या नावासाठी व्हेरिएबल जर तुम्हाला मालमत्तेसारखेच हवे नसेल. जर तुम्ही की प्रदान केली नाही class आणि property की हा स्ट्रिंगचा अॅरे असेल, तर वर्गाचे नाव property अॅरेचा पहिला घटक असेल. |
state |
ऐच्छिक | स्यूडो-क्लास वेरिएंटची सूची जसे :hover की :focus युटिलिटीसाठी तयार करा. कोणतेही डीफॉल्ट मूल्य नाही. |
responsive |
ऐच्छिक | प्रतिसाद देणारे वर्ग व्युत्पन्न करणे आवश्यक आहे का हे दर्शवणारे बुलियन. false मुलभूतरित्या. |
rfs |
ऐच्छिक | फ्लुइड रिस्केलिंग सक्षम करण्यासाठी बुलियन. हे कसे कार्य करते हे शोधण्यासाठी RFS पृष्ठावर एक नजर टाका. false मुलभूतरित्या. |
print |
ऐच्छिक | प्रिंट क्लासेस व्युत्पन्न करणे आवश्यक आहे का हे दर्शवणारे बुलियन. false मुलभूतरित्या. |
rtl |
ऐच्छिक | RTL मध्ये उपयुक्तता ठेवली पाहिजे का हे दर्शवणारे बुलियन. true मुलभूतरित्या. |
API स्पष्ट केले
$utilities
सर्व युटिलिटी व्हेरिएबल्स आमच्या _utilities.scss
स्टाइलशीटमधील व्हेरिएबलमध्ये जोडल्या जातात . युटिलिटीजचा प्रत्येक गट यासारखा दिसतो:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
जे खालील आउटपुट करते:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
सानुकूल वर्ग उपसर्ग
class
संकलित CSS मध्ये वापरलेला वर्ग उपसर्ग बदलण्यासाठी पर्याय वापरा :
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
आउटपुट:
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
राज्ये
state
स्यूडो-क्लास भिन्नता निर्माण करण्यासाठी पर्याय वापरा . उदाहरण छद्म-वर्ग आहेत :hover
आणि :focus
. जेव्हा राज्यांची यादी दिली जाते, तेव्हा त्या छद्म-वर्गासाठी वर्गनावे तयार केली जातात. उदाहरणार्थ, होव्हरवर अस्पष्टता बदलण्यासाठी, जोडा state: hover
आणि तुम्हाला .opacity-hover:hover
तुमच्या संकलित CSS मध्ये मिळेल.
एकाधिक छद्म-वर्गांची आवश्यकता आहे? राज्यांची जागा-विभक्त सूची वापरा: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
आउटपुट:
.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
प्रतिसाद देणारी उपयुक्तता
सर्व ब्रेकपॉइंट्सवरresponsive
प्रतिसादात्मक उपयुक्तता (उदा. .opacity-md-25
) व्युत्पन्न करण्यासाठी बुलियन जोडा .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
आउटपुट:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1 !important; }
}
@media (min-width: 768px) {
.opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1 !important; }
}
@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1 !important; }
}
@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1 !important; }
}
@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1 !important; }
}
उपयुक्तता बदलणे
समान की वापरून विद्यमान युटिलिटीज ओव्हरराइड करा. उदाहरणार्थ, जर तुम्हाला अतिरिक्त प्रतिसादात्मक ओव्हरफ्लो युटिलिटी वर्ग हवे असतील तर तुम्ही हे करू शकता:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
उपयुक्तता मुद्रित करा
print
पर्याय सक्षम केल्याने प्रिंटसाठी उपयुक्तता वर्ग देखील@media print { ... }
तयार होतील, जे केवळ मीडिया क्वेरीमध्ये लागू केले जातात.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
आउटपुट:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media print {
.opacity-print-0 { opacity: 0 !important; }
.opacity-print-25 { opacity: .25 !important; }
.opacity-print-50 { opacity: .5 !important; }
.opacity-print-75 { opacity: .75 !important; }
.opacity-print-100 { opacity: 1 !important; }
}
महत्त्व
API द्वारे व्युत्पन्न केलेल्या सर्व उपयुक्ततांमध्ये !important
हे सुनिश्चित करणे समाविष्ट आहे की ते घटक आणि सुधारक वर्ग अभिप्रेत आहे. तुम्ही हे सेटिंग जागतिक स्तरावर $enable-important-utilities
व्हेरिएबल (डीफॉल्टवर true
) सह टॉगल करू शकता.
API वापरणे
आता तुम्हाला युटिलिटिज API कसे कार्य करते हे माहित आहे, तुमचे स्वतःचे सानुकूल वर्ग कसे जोडायचे आणि आमच्या डीफॉल्ट युटिलिटीज कसे सुधारायचे ते शिका.
उपयुक्तता जोडा
$utilities
डीफॉल्ट नकाशावर नवीन उपयुक्तता जोडल्या जाऊ शकतात map-merge
. आमच्या आवश्यक Sass फायली आणि _utilities.scss
त्या प्रथम आयात केल्या आहेत याची खात्री करा, नंतर map-merge
तुमच्या अतिरिक्त उपयुक्तता जोडण्यासाठी वापरा. उदाहरणार्थ, cursor
तीन मूल्यांसह प्रतिसादात्मक उपयुक्तता कशी जोडायची ते येथे आहे.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
उपयुक्तता सुधारित करा
$utilities
डीफॉल्ट नकाशामध्ये map-get
आणि map-merge
फंक्शन्ससह विद्यमान उपयुक्तता सुधारित करा . width
खालील उदाहरणामध्ये, आम्ही युटिलिटीजमध्ये अतिरिक्त मूल्य जोडत आहोत . आद्याक्षरासह प्रारंभ करा map-merge
आणि नंतर आपण कोणती उपयुक्तता सुधारित करू इच्छिता ते निर्दिष्ट करा. तेथून, युटिलिटीचे पर्याय आणि मूल्ये ऍक्सेस करण्यासाठी आणि सुधारित करण्यासाठी नेस्टेड "width"
नकाशा आणा.map-get
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": map-merge(
map-get($utilities, "width"),
(
values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(10: 10%),
),
),
),
)
);
प्रतिसाद सक्षम करा
डिफॉल्टनुसार सध्या रिस्पॉन्सिव्ह नसलेल्या युटिलिटीजच्या विद्यमान सेटसाठी तुम्ही रिस्पॉन्सिव्ह क्लासेस सक्षम करू शकता. उदाहरणार्थ, border
वर्गांना प्रतिसाद देण्यासाठी:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ),
),
)
);
हे आता प्रत्येक ब्रेकपॉइंटचे .border
आणि त्याच्यासाठी प्रतिसादात्मक भिन्नता निर्माण करेल . .border-0
तुमचे व्युत्पन्न केलेले CSS असे दिसेल:
.border { ... }
.border-0 { ... }
@media (min-width: 576px) {
.border-sm { ... }
.border-sm-0 { ... }
}
@media (min-width: 768px) {
.border-md { ... }
.border-md-0 { ... }
}
@media (min-width: 992px) {
.border-lg { ... }
.border-lg-0 { ... }
}
@media (min-width: 1200px) {
.border-xl { ... }
.border-xl-0 { ... }
}
@media (min-width: 1400px) {
.border-xxl { ... }
.border-xxl-0 { ... }
}
उपयुक्तता पुनर्नामित करा
v4 युटिलिटिज गहाळ आहेत, किंवा दुसर्या नामकरण पद्धतीचा वापर केला आहे? युटिलिटी API चा वापर दिलेल्या युटिलिटीच्या परिणामी ओव्हरराइड करण्यासाठी केला जाऊ शकतो class
—उदाहरणार्थ, .ms-*
युटिलिटीजचे नाव जुन्यामध्ये बदलण्यासाठी .ml-*
:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"margin-start": map-merge(
map-get($utilities, "margin-start"),
( class: ml ),
),
)
);
उपयुक्तता काढा
ग्रुप की वर सेट करून कोणतीही डीफॉल्ट युटिलिटी काढून टाका null
. उदाहरणार्थ, आमच्या सर्व width
उपयुक्तता काढून टाकण्यासाठी, एक तयार करा $utilities
map-merge
आणि आत जोडा "width": null
.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
RTL मधील उपयुक्तता काढा
काही एज केसेस RTL स्टाईल करणे कठीण करतात , जसे की अरबीमध्ये लाइन ब्रेक. rtl
अशा प्रकारे पर्याय सेट करून RTL आउटपुटमधून उपयुक्तता वगळल्या जाऊ शकतात false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
आउटपुट:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
हे RTL मध्ये काहीही आउटपुट करत नाही , RTLCSS remove
नियंत्रण निर्देशांबद्दल धन्यवाद .