उपयुक्तताय एपीआय
उपयुक्तताय एपीआय हें उपयुक्तताय वर्ग तयार करपाक Sass-आधारीत साधन आसा.
बूटस्ट्रॅप उपयुक्तताय आमच्या उपयुक्तताय API वरवीं तयार केल्यात आनी Sass वरवीं आमच्या उपयुक्तताय वर्गांच्या मुलभूत संचांत बदल करपाक वा विस्तार करपाक वापरूं येता. आमची उपयुक्तताय API वेगवेगळ्या पर्यायां सयत वर्गांचीं कुटुंबां तयार करपा खातीर Sass नकाशांची आनी कार्यांची माळ आदारीत आसा. तुमकां Sass नकाशांची वळख ना जाल्यार, सुरवात करपाक अधिकृत Sass डॉक्साचेर वाचात .
नकाशांत आमचीं सगळीं उपयुक्तताय आसात आनी उपरांत तुमच्या सानुकूल नकाशा $utilities
वांगडा विलीन जाता , जर हाजीर आसल्यार. $utilities
उपयुक्तताय नकाशांत उपयुक्तताय गटांची की केल्ली वळेरी आसता जी सकयल दिल्ले पर्याय स्वीकारतात:
पर्याय | प्रकार | मुलभूत मोल | वर्णन |
---|---|---|---|
property |
गरजेचें | – 1 . | गुणधर्माचे नांव, ही स्ट्रिंग वा स्ट्रिंगांची सरणी आसूं येता (देखीक, आडवे पॅडिंग वा मार्जिन). |
values |
गरजेचें | – 1 . | मोलांची वळेरी, वा तुमकां वर्गाचें नांव मोला सारकें आसचें ना जाल्यार नकासो. null नकाशा कळ म्हणून वापरल्यार, तें संकलित जायना . |
class |
पर्यायी | शुन्य | उत्पन्न केल्ल्या वर्गाचें नांव. पुरवण करूंक ना आनी property स्ट्रिंग्साची ऍरे आसल्यार, ऍरेच्या class पयल्या घटकाक पूर्वनिर्धारीत जातली property . |
css-var |
पर्यायी | false |
CSS नेमां बदला CSS चड-उणें तयार करपाक बूलियन. |
local-vars |
पर्यायी | शुन्य | CSS नेमा भायर तयार करपाक थळाव्या CSS चयापचयाचो नकासो. |
state |
पर्यायी | शुन्य | तयार करपाक छद्म-वर्ग वेरिएंटांची वळेरी (देखीक, :hover वा :focus ). |
responsive |
पर्यायी | false |
प्रतिसाद दिवपी वर्ग तयार करचे काय ना तें दाखोवपी बूलियन. |
rfs |
पर्यायी | false |
RFS कडेन द्रव पुनर्मापन सक्षम करपाक बूलियन . |
print |
पर्यायी | false |
मुद्रण वर्ग तयार करपाची गरज आसा काय ना तें दाखोवपी बूलियन. |
rtl |
पर्यायी | true |
उपयुक्तताय RTL त दवरची काय ना तें दाखोवपी बूलियन. |
एपीआय हांणी स्पश्ट केलें
$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,
)
आमच्या position
उपयुक्तताय प्रमाणें, वळेरी वा नकासो सेट करपी Sass व्हेरिएबल म्हणून :
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 चडांत चड उपयुक्तताय
css-var
बूलियन पर्याय सेट करात आनी API सदच्या नेमां true
बदला दिल्ल्या निवडकाखातीर थळावे CSS चड-उणें तयार करतले . 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; }
थळावे CSS चड-उणें
local-vars
उपयुक्तताय वर्गाच्या नेमसंग्रहांत थळावे CSS चड-उणें निर्माण करपी Sass नकासो निर्देशीत करपाक पर्याय वापरात . उपकार करून लक्षांत दवरात की तयार केल्ल्या CSS नेमांत त्या थळाव्या 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
तुमच्या संकलित 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; }
}
छापचें
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: (
"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 उपयुक्तताय गळून पडल्या, वा दुसऱ्या नांव दिवपाच्या रूढिवादाक वापरल्या? दिल्ल्या उपयुक्ततेच्या परिणामाक अधिलिखित करपाक उपयुक्तताय 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
नियंत्रण निर्देशाक लागून .