उपयोगिता एपीआई के बा
यूटिलिटी एपीआई यूटिलिटी क्लास जनरेट करे खातिर एगो सास आधारित टूल हवे।
बूटस्ट्रैप उपयोगिता हमनी के उपयोगिता एपीआई के साथ जनरेट कइल जाला आ एकर इस्तेमाल सास के माध्यम से उपयोगिता वर्ग के हमनी के डिफ़ॉल्ट सेट के संशोधित भा विस्तार करे खातिर कइल जा सकेला। हमनी के उपयोगिता एपीआई विभिन्न विकल्प वाला क्लास के परिवार जनरेट करे खातिर सास मैप आ फंक्शन के एगो श्रृंखला पर आधारित बा। अगर रउआँ सास नक्शा से अपरिचित बानी, त शुरुआत करे खातिर आधिकारिक सास डॉक्स पर पढ़ीं।
नक्शा में हमनी के $utilities
सभ उपयोगिता बा आ बाद में आपके कस्टम नक्शा में विलय कइल जाला $utilities
, अगर मौजूद होखे। उपयोगिता नक्शा में उपयोगिता समूह सभ के कुंजी वाला लिस्ट होला जे निम्नलिखित विकल्प सभ के स्वीकार करे लें:
विकल्प | किसिम | बिबरन |
---|---|---|
property |
जरूरी | गुण के नाँव, ई स्ट्रिंग हो सके ला या स्ट्रिंग सभ के सरणी (जइसे कि, क्षैतिज पैडिंग भा मार्जिन)। |
values |
जरूरी | मान सभ के लिस्ट, या कौनों नक्शा अगर आप नइखीं चाहत कि क्लास के नाँव मान के समान होखे। अगर null मैप की के रूप में इस्तेमाल कइल जाला तब एकरा के संकलित ना कइल जाला। |
class |
ऐच्छिक | क्लास के नाँव खातिर चर अगर रउआँ नइखीं चाहत कि ई गुण के समान होखे। एह स्थिति में कि रउआँ कुंजी ना देब class आ property कुंजी स्ट्रिंग सभ के सरणी हवे, क्लास के नाँव property सरणी के पहिला तत्व होखी। |
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; }
कस्टम क्लास के उपसर्ग बा
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
. सुनिश्चित करीं कि हमनी के जरूरी 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
राउर जनरेट कइल सीएसएस अइसन लउकी:
.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 स्टाइलिंग कठिन बनावेला , जइसे कि अरबी में लाइन ब्रेक। 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
नियंत्रण निर्देशक के बदौलत .