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

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

एह पन्ना पर दिहल गइल बा

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

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

विकल्प	किसिम	डिफ़ॉल्ट मान बा	बिबरन
`property`	जरूरी	– 1999 में भइल रहे।	गुण के नाँव, ई स्ट्रिंग हो सके ला या स्ट्रिंग सभ के सरणी (जइसे कि, क्षैतिज पैडिंग भा मार्जिन)।
`values`	जरूरी	– 1999 में भइल रहे।	मान सभ के लिस्ट, या कौनों नक्शा अगर आप नइखीं चाहत कि क्लास के नाँव मान के समान होखे। अगर `null`मैप की के रूप में इस्तेमाल कइल जाला तब एकरा के संकलित ना कइल जाला।
`class`	ऐच्छिक	कुछ ना	जनरेट कइल गइल क्लास के नाम। अगर ना दिहल गइल होखे आ `property`स्ट्रिंग सभ के सरणी होखे, सरणी के `class`पहिला तत्व पर डिफ़ॉल्ट रूप से होखी `property`।
`css-var`	ऐच्छिक	`false`	सीएसएस नियम के बजाय सीएसएस चर जनरेट करे खातिर बूलियन।
`local-vars`	ऐच्छिक	कुछ ना	सीएसएस नियम के अलावा जनरेट करे खातिर स्थानीय सीएसएस चर के नक्शा।
`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; }

धन-दउलत

propertyकवनो भी उपयोगिता खातिर जरूरी कुंजी सेट होखे के चाहीं, आ एह में एगो वैध CSS गुण होखे के चाहीं। ई गुण जेनरेट कइल गइल यूटिलिटी के रूलसेट में इस्तेमाल होला। जब classकुंजी छोड़ दिहल जाला तब ई डिफ़ॉल्ट क्लास नाँव के रूप में भी काम करे ला। text-decorationउपयोगिता पर विचार कइल जाव :

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

आउटपुट के बा:

.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लिस्ट भा मैप हो सके ला (यूटिलिटीज में सेट कइल गइल या सस चर में)।

एगो सूची के रूप में, जइसे कि text-decorationउपयोगिता के साथ :

values: none underline line-through

नक्शा के रूप में, जइसे कि opacityउपयोगिता के साथ :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

एगो Sass चर के रूप में जवन सूची या नक्शा सेट करेला, जइसे कि हमनी के positionउपयोगिता में :

values: $position-values

कक्षा

classसंकलित सीएसएस में इस्तेमाल कइल गइल क्लास उपसर्ग बदले खातिर विकल्प के इस्तेमाल करीं । उदाहरण खातिर, से बदले .opacity-*खातिर .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 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-varबूलियन विकल्प के सेट करीं trueआ एपीआई सामान्य property: valueनियम के बजाय दिहल गइल चयनकर्ता खातिर स्थानीय CSS चर जनरेट करी। .text-opacity-*हमनी के उपयोगिता पर विचार करीं :

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 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; }

स्थानीय सीएसएस चर के बारे में बतावल गइल बा

विकल्प के इस्तेमाल local-varsएगो सास मैप निर्दिष्ट करे खातिर करीं जवन उपयोगिता वर्ग के नियम सेट के भीतर स्थानीय CSS चर जनरेट करी। कृपया ध्यान दीं कि जनरेट कइल गइल CSS नियम सभ में ओह स्थानीय CSS चर सभ के खपत करे खातिर अतिरिक्त काम के जरूरत पड़ सके ला। जइसे कि हमनी के .bg-*उपयोगिता पर विचार करीं:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

आउटपुट के बा:

.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अपना संकलित सीएसएस में मिल जाई.

कई गो छद्म-वर्ग के जरूरत बा? राज्यन के स्पेस से अलग कइल सूची के इस्तेमाल करीं: 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; }
}

छापल जाला

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: (
  "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-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नियंत्रण निर्देशक के बदौलत .