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

यूटिलिटी एपीआई यूटिलिटी क्लासें गी पैदा करने आस्तै इक सस-आधारत उपकरण ऐ।

इस पेज पर

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

नक्शे च साढ़ी सारी उपयोगिताएं गी शामल कीता $utilitiesजंदा ऐ ते बाद च तुंदे कस्टम $utilitiesनक्शे कन्नै मर्ज कीता जंदा ऐ, जेकर मौजूद ऐ। उपयोगिता नक्शे च उपयोगिता समूहें दी कुंजी आह् ली सूची ऐ जेह् ड़ी निम्नलिखित विकल्पें गी स्वीकार करदी ऐ :

चारा	किसम	डिफ़ॉल्ट मान ऐ	ब्यौरा
`property`	लोड़चदा	– ऐ	गुण दा नांऽ, एह् इक स्ट्रिंग जां स्ट्रिंग्स दी सरणी (जियां, क्षैतिज पैडिंग जां हाशिया) होई सकदी ऐ.
`values`	लोड़चदा	– ऐ	मूल्यें दी सूची, जां इक नक्शा जेकर तुस नेईं चांह् दे ओ जे वर्ग दा नांऽ मूल्य दे समान होऐ. जेकर `null`नक्शा कुंजी दे रूप च बरतेआ जंदा ऐ तां एह् संकलित नेईं कीता जंदा ऐ।
`class`	विकल्पी	शून्य	जनरेट कीती गेदी क्लास दा नांऽ। जेकर उपलब्ध नेईं ऐ ते `property`स्ट्रिंग्स दी इक सरणी ऐ तां सरणी दे `class`पैह् ले तत्व गी डिफाल्ट करग `property`.
`css-var`	विकल्पी	`false`	CSS नियमें दी बजाय CSS चर पैदा करने आस्तै बूलियन।
`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संकलित CSS च इस्तेमाल कीते गेदे वर्ग उपसर्ग गी बदलने लेई विकल्प दा उपयोग करो . मसलन, थमां बदलने .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दी बजाय दित्ते गेदे चयनकर्ता आस्तै लोकल CSS चर पैदा करग . property: valueसाढ़ी .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; }

लोकल सीएसएस चर

इक Sass नक्शा निर्दिश्ट करने आस्तै विकल्प दा उपयोग करो 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अपने संकलित CSS च मिलग।

कई छद्म-वर्गें दी लोड़ ऐ ? राज्यें दी इक स्पेस-अलग कीती गेदी सूची दा इस्तेमाल करो: 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तुंदा जनरेट कीता गेदा 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 उपयोगिताएं गी लापता ऐ, जां कुसै होर नामकरण कन्वेंशन दा इस्तेमाल कीता गेदा ऐ? यूटिलिटीज एपीआई दा इस्तेमाल कुसै दित्ती गेदी यूटिलिटी दे नतीजे गी ओवरराइड करने आस्तै कीता जाई सकदा ऐ 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विकल्प गी सेट करियै छोड़ी दित्ता जाई सकदा ऐ 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नियंत्रण निर्देशक दी बदौलत .