उपयोगिता एपीआई
उपयोगिता एपीआई उपयोगिता वर्ग उत्पन्न करने के लिए एक सास-आधारित उपकरण है।
बूटस्ट्रैप उपयोगिताओं को हमारे उपयोगिता एपीआई के साथ उत्पन्न किया जाता है और इसका उपयोग सैस के माध्यम से उपयोगिता वर्गों के हमारे डिफ़ॉल्ट सेट को संशोधित या विस्तारित करने के लिए किया जा सकता है। हमारी उपयोगिता एपीआई विभिन्न विकल्पों के साथ वर्गों के परिवारों को उत्पन्न करने के लिए सैस मानचित्रों और कार्यों की एक श्रृंखला पर आधारित है। यदि आप Sass मानचित्रों से अपरिचित हैं, तो आरंभ करने के लिए आधिकारिक Sass दस्तावेज़ पढ़ें।
मानचित्र में हमारी $utilities
सभी सुविधाएं शामिल हैं और $utilities
यदि मौजूद हैं तो बाद में इसे आपके कस्टम मानचित्र के साथ मिला दिया जाता है। उपयोगिता मानचित्र में उपयोगिता समूहों की एक प्रमुख सूची है जो निम्नलिखित विकल्पों को स्वीकार करते हैं:
विकल्प | टाइप | विवरण |
---|---|---|
property |
आवश्यक | संपत्ति का नाम, यह एक स्ट्रिंग या स्ट्रिंग्स की एक सरणी हो सकती है (उदाहरण के लिए, क्षैतिज पैडिंग या मार्जिन)। |
values |
आवश्यक | मानों की सूची, या मानचित्र यदि आप नहीं चाहते कि वर्ग का नाम मान के समान हो। यदि null मानचित्र कुंजी के रूप में उपयोग किया जाता है, तो इसे संकलित नहीं किया जाता है। |
class |
वैकल्पिक | वर्ग के नाम के लिए परिवर्तनीय यदि आप नहीं चाहते कि यह संपत्ति के समान हो। यदि आप कुंजी प्रदान नहीं करते हैं class और property कुंजी तारों की एक सरणी है, तो वर्ग का नाम property सरणी का पहला तत्व होगा। |
state |
वैकल्पिक | :hover उपयोगिता के लिए या :focus उत्पन्न करने के लिए छद्म श्रेणी के वेरिएंट की सूची । कोई डिफ़ॉल्ट मान नहीं। |
responsive |
वैकल्पिक | बूलियन इंगित करता है कि उत्तरदायी वर्गों को उत्पन्न करने की आवश्यकता है या नहीं। false डिफ़ॉल्ट रूप से। |
rfs |
वैकल्पिक | द्रव पुनर्विक्रय को सक्षम करने के लिए बूलियन। यह कैसे काम करता है, यह जानने के लिए RFS पृष्ठ पर एक नज़र डालें । false डिफ़ॉल्ट रूप से। |
print |
वैकल्पिक | बूलियन इंगित करता है कि प्रिंट कक्षाओं को उत्पन्न करने की आवश्यकता है या नहीं। false डिफ़ॉल्ट रूप से। |
rtl |
वैकल्पिक | बूलियन इंगित करता है कि उपयोगिता को आरटीएल में रखा जाना चाहिए या नहीं। true डिफ़ॉल्ट रूप से। |
एपीआई समझाया
सभी उपयोगिता चर $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
अपने संकलित सीएसएस में प्राप्त करेंगे।
एकाधिक छद्म वर्गों की आवश्यकता है? राज्यों की अंतरिक्ष से अलग की गई सूची का उपयोग करें: 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; }
}
महत्त्व
एपीआई द्वारा उत्पन्न सभी उपयोगिताओं में !important
यह सुनिश्चित करना शामिल है कि वे घटकों और संशोधक वर्गों को ओवरराइड करते हैं। आप इस सेटिंग को $enable-important-utilities
वैरिएबल के साथ विश्व स्तर पर टॉगल कर सकते हैं (डिफॉल्ट टू true
)।
एपीआई का उपयोग करना
अब जब आप यूटिलिटीज एपीआई के काम करने के तरीके से परिचित हो गए हैं, तो जानें कि अपनी खुद की कस्टम क्लास कैसे जोड़ें और हमारी डिफॉल्ट यूटिलिटीज को कैसे संशोधित करें।
उपयोगिताओं को जोड़ें
नई उपयोगिताओं को डिफ़ॉल्ट $utilities
मानचित्र में एक के साथ जोड़ा जा सकता है map-merge
। सुनिश्चित करें कि हमारी आवश्यक एसएएस फाइलें _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
प्रत्येक ब्रेकपॉइंट के लिए उत्तरदायी रूपांतर उत्पन्न करेगा। आपका जेनरेट किया गया सीएसएस इस तरह दिखेगा:
.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 उपयोगिताओं, या किसी अन्य नामकरण परंपरा के लिए उपयोग किया जाता है? उपयोगिताओं एपीआई का उपयोग किसी दी गई उपयोगिता के परिणाम को ओवरराइड करने के लिए किया जा सकता है class
- उदाहरण के लिए, .ms-*
उपयोगिताओं का नाम बदलकर oldish करने के लिए .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
इस प्रकार यूटिलिटीज को विकल्प सेट करके आरटीएल आउटपुट से हटाया जा सकता है 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 */
यह आरटीएल में कुछ भी आउटपुट नहीं करता है, आरटीएलसीएसएस remove
नियंत्रण निर्देश के लिए धन्यवाद ।