उपयोगिता एपीआई
उपयोगिता एपीआई उपयोगिता वर्गक कें उत्पन्न करय कें लेल एकटा सास-आधारित उपकरण छै.
बूटस्ट्रैप उपयोगिताक कें हमर उपयोगिता एपीआई कें साथ उत्पन्न कैल जैतय छै आ एकर उपयोग Sass कें माध्यम सं उपयोगिता वर्गक कें हमर डिफ़ॉल्ट सेट कें संशोधित करय या विस्तार करय कें लेल कैल जा सकय छै. हमर उपयोगिता एपीआई विभिन्न विकल्पक कें साथ वर्गक कें परिवारक कें उत्पन्न करय कें लेल सास मैप आ फंक्शनक कें एकटा श्रृंखला पर आधारित छै. अगर अहां सास मैप सं अपरिचित छी तं शुरू करय लेल आधिकारिक सास डॉक्स पर पढ़ू .
नक्शा मे $utilities
हमर सबटा उपयोगिता अछि आ बाद मे अहां कें कस्टम नक्शा सं विलय कैल जायत छै $utilities
, अगर मौजूद छै. उपयोगिता मानचित्र मे उपयोगिता समूहक कें कुंजीबद्ध सूची होयत छै जे निम्नलिखित विकल्पक कें स्वीकार करयत छै:
विकल्प | प्रकार | पूर्वनिर्धारित मान | वर्णन |
---|---|---|---|
property |
आवश्यक | – 1999। | गुण क नाम, इ एकटा स्ट्रिंग या स्ट्रिंग क सरणी (जैना, क्षैतिज पैडिंग या मार्जिन) भ सकैत अछि । |
values |
आवश्यक | – 1999। | मानक सूची, अथवा एकटा नक्शा जँ अहाँ नहि चाहैत छी जे वर्गक नाम मानक समान हो. यदि null नक्शा कुंजी के रूप में प्रयोग करलऽ जाय छै, त॑ ई संकलित नै होय छै । |
class |
ऐच्छिक | सुन्ना | उत्पन्न वर्ग का नाम। यदि प्रदान नहि कएल गेल property अछि आओर स्ट्रिंग क' एकटा सरणी अछि, तँ सरणी class क पहिल तत्व क' लेल डिफ़ॉल्ट रूप सँ होएत property . |
css-var |
ऐच्छिक | false |
CSS नियमक कें बजाय CSS चर उत्पन्न करय कें लेल बूलियन. |
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
कुंजी सेट करनाय आवश्यक छै, आओर ओकरा मे एकटा वैध CSS गुण होबाक चाही. इ गुण उत्पन्न उपयोगिता कें नियम सेट मे उपयोग कैल जायत छै. जखन class
कुंजी छोड़ल गेल अछि, तखन ई डिफ़ॉल्ट वर्ग नाम क रूप मे सेहो काज करैत अछि. text-decoration
उपयोगिता पर विचार करू : १.
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
आउटपुट: 1।
.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
एकटा सूची या नक्शा (उपयोगिता मे या एकटा Sass चर मे सेट) भ सकय छै.
एक सूची के रूप में, 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
संकलित CSS मे प्रयुक्त वर्ग उपसर्ग बदलबाक लेल विकल्प क उपयोग करू . जेना, सँ बदलबाक .opacity-*
लेल .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
आउटपुट: 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
)
),
);
आउटपुट: 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; }
स्थानीय सीएसएस चर
एकटा Sass नक्शा निर्दिष्ट करय कें लेल विकल्प कें उपयोग करूं local-vars
जे उपयोगिता वर्ग कें नियम सेट कें भीतर स्थानीय CSS चर उत्पन्न करतय. कृपया ध्यान दिअ जे उत्पन्न सीएसएस नियम मे ओ स्थानीय सीएसएस चर कें उपभोग करय कें लेल अतिरिक्त काज कें आवश्यकता भ सकय छै. जेना, हमर .bg-*
उपयोगिता पर विचार करू:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
आउटपुट: 1।
.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,
)
)
);
आउटपुट: 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,
)
)
);
आउटपुट: 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,
)
)
);
आउटपुट: 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
. _ सुनिश्चित करू जे हमर आवश्यक 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 उपयोगिता गायब, या कोनो अन्य नामकरण रूढ़ि के आदत? उपयोगिता एपीआई कें उपयोग कोनों देल गेल उपयोगिता कें परिणाम कें ओवरराइड करय कें लेल कैल जा सकय छै 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
एहि तरहें उपयोगिताक कें आरटीएल आउटपुट सं विकल्प कें सेट करयत छोड़ल जा सकय छै false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
आउटपुट: 1।
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
ई आरटीएल मे किछु आउटपुट नहि करैत अछि, आरटीएलसीएसएस remove
नियंत्रण निर्देशक कें बदौलत .