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

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

उपयोगिता एपीआई उपयोगिता वर्गक कें उत्पन्न करय कें लेल एकटा सास-आधारित उपकरण छै.

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

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

विकल्प प्रकार पूर्वनिर्धारित मान वर्णन
property आवश्यक – 1999। गुण क नाम, इ एकटा स्ट्रिंग या स्ट्रिंग क सरणी (जैना, क्षैतिज पैडिंग या मार्जिन) भ सकैत अछि ।
values आवश्यक – 1999। मानक सूची, अथवा एकटा नक्शा जँ अहाँ नहि चाहैत छी जे वर्गक नाम मानक समान हो. यदि 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
  )
);

आउटपुट: 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,
)

एकटा 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,
    )
  )
);

आउटपुट: 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नियमक कें बजाय देल गेल चयनकर्ता कें लेल स्थानीय सीएसएस चर उत्पन्न करतय. हमर .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; }

स्थानीय सीएसएस चर

एकटा Sass नक्शा निर्दिष्ट करय कें लेल विकल्प कें उपयोग करूं local-varsजे उपयोगिता वर्ग कें नियम सेट कें भीतर स्थानीय 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

एकाधिक छद्म-वर्गक आवश्यकता अछि ? राज्यक एकटा स्पेस-अलग कएल गेल सूचीक प्रयोग करू: 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; }
}

महत्व

एपीआई दूवारा उत्पन्न सबटा उपयोगिताक !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-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 उपयोगिता गायब, या कोनो अन्य नामकरण रूढ़ि के आदत? उपयोगिता एपीआई कें उपयोग कोनों देल गेल उपयोगिता कें परिणाम कें ओवरराइड करय कें लेल कैल जा सकय छै 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
  ),
);

आउटपुट: 1।

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

ई आरटीएल मे किछु आउटपुट नहि करैत अछि, आरटीएलसीएसएस removeनियंत्रण निर्देशक कें बदौलत .