उपयुक्तताय एपीआय
उपयुक्तताय एपीआय हें उपयुक्तताय वर्ग तयार करपाक Sass-आधारीत साधन आसा.
बूटस्ट्रॅप उपयुक्तताय आमच्या उपयुक्तताय 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 पूर्वनिर्धारीतपणान. |
एपीआय हांणी स्पश्ट केलें
$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,
)
)
);
उत्पादन: 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,
)
)
);
उत्पादन: 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; }
}
उपयुक्तताय बदलप
तीच कळ वापरून सद्याच्या उपयुक्तताय अधिलिखित करात. देखीक, तुमकां अतिरिक्त प्रतिसाद दिवपी ओव्हरफ्लो उपयुक्तताय वर्ग जाय जाल्यार, तुमी हें करूंक शकतात:
$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,
)
)
);
उत्पादन: 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 कशी काम करता हाची वळख जाल्या, तुमचे स्वताचे सानुकूल वर्ग कशे जोडचे आनी आमचीं मुलभूत उपयुक्तताय कशीं बदलचीं तें शिकात.
उपयुक्तताय जोडात
$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
उपयुक्तताय काडून उडोवपाक, a तयार करात $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 उत्पादनांतल्यान सोडूं येता 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 */
हाका लागून RTL त कांयच आउटपुट जायना, RTLCSS remove
नियंत्रण निर्देशाक लागून .