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

उपयुक्तता API

युटिलिटी एपीआय हे युटिलिटी क्लासेस तयार करण्यासाठी सास-आधारित साधन आहे.

बूटस्ट्रॅप युटिलिटिज आमच्या युटिलिटी एपीआय द्वारे व्युत्पन्न केल्या जातात आणि Sass द्वारे युटिलिटी क्लासेसच्या आमच्या डीफॉल्ट सेटमध्ये बदल किंवा विस्तार करण्यासाठी वापरल्या जाऊ शकतात. आमची उपयुक्तता API विविध पर्यायांसह वर्गांची कुटुंबे निर्माण करण्यासाठी Sass नकाशे आणि कार्यांच्या मालिकेवर आधारित आहे. तुम्हाला Sass नकाशे अपरिचित असल्यास, प्रारंभ करण्यासाठी अधिकृत Sass दस्तऐवज वाचा.

नकाशामध्ये आमच्या सर्व उपयुक्तता समाविष्ट आहेत आणि $utilitiesनंतर आपल्या सानुकूल नकाशासह विलीन केले जाते $utilities, जर उपस्थित असेल. युटिलिटी मॅपमध्‍ये खालील पर्यायांना स्‍वीकारणार्‍या युटिलिटी गटांची प्रमुख सूची असते:

पर्याय प्रकार वर्णन
property आवश्यक आहे मालमत्तेचे नाव, हे स्ट्रिंग किंवा स्ट्रिंगचे अॅरे असू शकते (उदा. क्षैतिज पॅडिंग किंवा समास).
values आवश्यक आहे मूल्यांची सूची, किंवा जर तुम्हाला वर्गाचे नाव मूल्यासारखे असावे असे वाटत नसेल तर नकाशा. नकाशा nullकी म्हणून वापरल्यास, ते संकलित केले जात नाही.
class ऐच्छिक वर्गाच्या नावासाठी व्हेरिएबल जर तुम्‍हाला मालमत्तेसारखेच हवे नसेल. जर तुम्ही की प्रदान केली नाही classआणि propertyकी हा स्ट्रिंगचा अ‍ॅरे असेल, तर वर्गाचे नाव propertyअ‍ॅरेचा पहिला घटक असेल.
state ऐच्छिक स्यूडो-क्लास वेरिएंटची सूची जसे :hoverकी :focusयुटिलिटीसाठी तयार करा. कोणतेही डीफॉल्ट मूल्य नाही.
responsive ऐच्छिक प्रतिसाद देणारे वर्ग व्युत्पन्न करणे आवश्यक आहे का हे दर्शवणारे बुलियन. falseमुलभूतरित्या.
rfs ऐच्छिक फ्लुइड रिस्केलिंग सक्षम करण्यासाठी बुलियन. हे कसे कार्य करते हे शोधण्यासाठी RFS पृष्ठावर एक नजर टाका. falseमुलभूतरित्या.
print ऐच्छिक प्रिंट क्लासेस व्युत्पन्न करणे आवश्यक आहे का हे दर्शवणारे बुलियन. falseमुलभूतरित्या.
rtl ऐच्छिक RTL मध्ये उपयुक्तता ठेवली पाहिजे का हे दर्शवणारे बुलियन. trueमुलभूतरित्या.

API स्पष्ट केले

$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तुमच्या संकलित 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; }
}

उपयुक्तता बदलणे

समान की वापरून विद्यमान युटिलिटीज ओव्हरराइड करा. उदाहरणार्थ, जर तुम्हाला अतिरिक्त प्रतिसादात्मक ओव्हरफ्लो युटिलिटी वर्ग हवे असतील तर तुम्ही हे करू शकता:

$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; }
}

महत्त्व

API द्वारे व्युत्पन्न केलेल्या सर्व उपयुक्ततांमध्ये !importantहे सुनिश्चित करणे समाविष्ट आहे की ते घटक आणि सुधारक वर्ग अभिप्रेत आहे. तुम्ही हे सेटिंग जागतिक स्तरावर $enable-important-utilitiesव्हेरिएबल (डीफॉल्टवर true) सह टॉगल करू शकता.

API वापरणे

आता तुम्हाला युटिलिटिज API कसे कार्य करते हे माहित आहे, तुमचे स्वतःचे सानुकूल वर्ग कसे जोडायचे आणि आमच्या डीफॉल्ट युटिलिटीज कसे सुधारायचे ते शिका.

उपयुक्तता जोडा

$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-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तुमचे व्युत्पन्न केलेले 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 युटिलिटिज गहाळ आहेत, किंवा दुसर्‍या नामकरण पद्धतीचा वापर केला आहे? युटिलिटी API चा वापर दिलेल्या युटिलिटीच्या परिणामी ओव्हरराइड करण्यासाठी केला जाऊ शकतो 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 स्टाईल करणे कठीण करतात , जसे की अरबीमध्ये लाइन ब्रेक. 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 */

हे RTL मध्ये काहीही आउटपुट करत नाही , RTLCSS removeनियंत्रण निर्देशांबद्दल धन्यवाद .