मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

उपयुक्तताय एपीआय

उपयुक्तताय एपीआय हें उपयुक्तताय वर्ग तयार करपाक 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नियंत्रण निर्देशाक लागून .