उपयोगिता एपीआई
उपयोगिता एपीआई उपयोगिता वर्ग उत्पन्न करने के लिए एक सास-आधारित उपकरण है।
बूटस्ट्रैप यूटिलिटीज हमारे यूटिलिटी एपीआई के साथ उत्पन्न होते हैं और सैस के माध्यम से उपयोगिता वर्गों के हमारे डिफ़ॉल्ट सेट को संशोधित या विस्तारित करने के लिए उपयोग किया जा सकता है। हमारी उपयोगिता एपीआई विभिन्न विकल्पों के साथ वर्गों के परिवारों को उत्पन्न करने के लिए सैस मानचित्रों और कार्यों की एक श्रृंखला पर आधारित है। यदि आप Sass मानचित्रों से अपरिचित हैं, तो आरंभ करने के लिए आधिकारिक Sass दस्तावेज़ पढ़ें।
मानचित्र में हमारी $utilities
सभी सुविधाएं शामिल हैं और $utilities
यदि मौजूद हैं तो बाद में इसे आपके कस्टम मानचित्र के साथ मिला दिया जाता है। उपयोगिता मानचित्र में उपयोगिता समूहों की एक प्रमुख सूची है जो निम्नलिखित विकल्पों को स्वीकार करती है:
विकल्प | टाइप | डिफ़ॉल्ट मान | विवरण |
---|---|---|---|
property |
आवश्यक | - | संपत्ति का नाम, यह एक स्ट्रिंग या स्ट्रिंग की एक सरणी हो सकती है (उदाहरण के लिए, क्षैतिज पैडिंग या मार्जिन)। |
values |
आवश्यक | - | मानों की सूची, या मानचित्र यदि आप नहीं चाहते कि वर्ग का नाम मान के समान हो। यदि null मानचित्र कुंजी के रूप में उपयोग किया जाता है, तो इसे संकलित नहीं किया जाता है। |
class |
वैकल्पिक | शून्य | उत्पन्न वर्ग का नाम। यदि प्रदान नहीं किया गया है और property स्ट्रिंग की एक सरणी है, तो सरणी class के पहले तत्व के लिए डिफ़ॉल्ट होगा property । |
css-var |
वैकल्पिक | false |
सीएसएस नियमों के बजाय सीएसएस चर उत्पन्न करने के लिए बूलियन। |
local-vars |
वैकल्पिक | शून्य | सीएसएस नियमों के अलावा जनरेट करने के लिए स्थानीय सीएसएस वैरिएबल का मैप. |
state |
वैकल्पिक | शून्य | उत्पन्न करने के लिए छद्म-वर्ग वेरिएंट (जैसे, :hover या ) की सूची।:focus |
responsive |
वैकल्पिक | false |
बूलियन इंगित करता है कि उत्तरदायी कक्षाएं उत्पन्न की जानी चाहिए या नहीं। |
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; }
संपत्ति
आवश्यक property
कुंजी को किसी भी उपयोगिता के लिए सेट किया जाना चाहिए, और इसमें एक वैध सीएसएस संपत्ति होनी चाहिए। इस संपत्ति का उपयोग जनरेट की गई उपयोगिता के नियम में किया जाता है। जब class
कुंजी को छोड़ दिया जाता है, तो यह डिफ़ॉल्ट वर्ग नाम के रूप में भी कार्य करता है। text-decoration
उपयोगिता पर विचार करें :
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
आउटपुट:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
मूल्यों
निर्दिष्ट करने के लिए कुंजी का उपयोग करें कि values
निर्दिष्ट के लिए कौन से मान property
जेनरेट किए गए वर्ग नामों और नियमों में उपयोग किए जाने चाहिए। एक सूची या नक्शा हो सकता है (उपयोगिताओं में या एक सैस चर में सेट)।
एक सूची के रूप में, जैसे text-decoration
उपयोगिताओं के साथ :
values: none underline line-through
मानचित्र के रूप में, जैसे opacity
उपयोगिताओं के साथ :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
एक Sass चर के रूप में जो सूची या मानचित्र सेट करता है, जैसा कि हमारी position
उपयोगिताओं में है :
values: $position-values
कक्षा
class
संकलित सीएसएस में प्रयुक्त वर्ग उपसर्ग को बदलने के लिए विकल्प का उपयोग करें । उदाहरण के लिए, से बदलने के .opacity-*
लिए .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
आउटपुट:
.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }
सीएसएस चर उपयोगिताओं
css-var
बूलियन विकल्प को पर सेट करें और एपीआई सामान्य नियमों true
के बजाय दिए गए चयनकर्ता के लिए स्थानीय सीएसएस चर उत्पन्न करेगा । property: value
हमारी .text-opacity-*
उपयोगिताओं पर विचार करें:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
आउटपुट:
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
स्थानीय सीएसएस चर
सैस मानचित्र निर्दिष्ट करने के लिए विकल्प का उपयोग करें local-vars
जो उपयोगिता वर्ग के नियमों के भीतर स्थानीय सीएसएस चर उत्पन्न करेगा। कृपया ध्यान दें कि जेनरेट किए गए सीएसएस नियमों में उन स्थानीय सीएसएस चर का उपभोग करने के लिए अतिरिक्त काम की आवश्यकता हो सकती है। उदाहरण के लिए, हमारी .bg-*
उपयोगिताओं पर विचार करें:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
आउटपुट:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
राज्य अमेरिका
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; }
}
छाप
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: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
उपयोगिताओं को जोड़ें
नई उपयोगिताओं को डिफ़ॉल्ट $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
नियंत्रण निर्देश के लिए धन्यवाद ।