मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
in English

उपयोगिता एपीआई के बा

यूटिलिटी एपीआई यूटिलिटी क्लास जनरेट करे खातिर एगो सास आधारित टूल हवे।

बूटस्ट्रैप उपयोगिता हमनी के उपयोगिता एपीआई के साथ जनरेट कइल जाला आ एकर इस्तेमाल सास के माध्यम से उपयोगिता वर्ग के हमनी के डिफ़ॉल्ट सेट के संशोधित भा विस्तार करे खातिर कइल जा सकेला। हमनी के उपयोगिता एपीआई विभिन्न विकल्प वाला क्लास के परिवार जनरेट करे खातिर सास मैप आ फंक्शन के एगो श्रृंखला पर आधारित बा। अगर रउआँ सास नक्शा से अपरिचित बानी, त शुरुआत करे खातिर आधिकारिक सास डॉक्स पर पढ़ीं।

नक्शा में हमनी के $utilitiesसभ उपयोगिता बा आ बाद में आपके कस्टम नक्शा में विलय कइल जाला $utilities, अगर मौजूद होखे। उपयोगिता नक्शा में उपयोगिता समूह सभ के कुंजी वाला लिस्ट होला जे निम्नलिखित विकल्प सभ के स्वीकार करे लें:

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