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

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

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

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

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

विकल्प टाइप विवरण
property आवश्यक संपत्ति का नाम, यह एक स्ट्रिंग या स्ट्रिंग्स की एक सरणी हो सकती है (उदाहरण के लिए, क्षैतिज पैडिंग या मार्जिन)।
values आवश्यक मानों की सूची, या मानचित्र यदि आप नहीं चाहते कि वर्ग का नाम मान के समान हो। यदि nullमानचित्र कुंजी के रूप में उपयोग किया जाता है, तो इसे संकलित नहीं किया जाता है।
class वैकल्पिक वर्ग के नाम के लिए परिवर्तनीय यदि आप नहीं चाहते कि यह संपत्ति के समान हो। यदि आप कुंजी प्रदान नहीं करते हैं classऔर propertyकुंजी तारों की एक सरणी है, तो वर्ग का नाम propertyसरणी का पहला तत्व होगा।
state वैकल्पिक :hoverउपयोगिता के लिए या :focusउत्पन्न करने के लिए छद्म श्रेणी के वेरिएंट की सूची । कोई डिफ़ॉल्ट मान नहीं।
responsive वैकल्पिक बूलियन इंगित करता है कि उत्तरदायी वर्गों को उत्पन्न करने की आवश्यकता है या नहीं। falseडिफ़ॉल्ट रूप से।
rfs वैकल्पिक द्रव पुनर्विक्रय को सक्षम करने के लिए बूलियन। यह कैसे काम करता है, यह जानने के लिए 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। सुनिश्चित करें कि हमारी आवश्यक एसएएस फाइलें _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प्रत्येक ब्रेकपॉइंट के लिए उत्तरदायी रूपांतर उत्पन्न करेगा। आपका जेनरेट किया गया सीएसएस इस तरह दिखेगा:

.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-*उपयोगिताओं का नाम बदलकर oldish करने के लिए .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नियंत्रण निर्देश के लिए धन्यवाद ।