उपयुक्तता API

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

या पृष्ठावर

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

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

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

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

मालमत्ता

आवश्यक 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सूची किंवा नकाशा असू शकतो (युटिलिटीजमध्ये किंवा 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,
    )
  )
);

आउटपुट:

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

जर class: null, प्रत्येक की साठी वर्ग व्युत्पन्न करते values:

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

आउटपुट:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS व्हेरिएबल युटिलिटीज

css-varबूलियन पर्याय सेट करा आणि API नेहमीच्या नियमांऐवजी trueदिलेल्या निवडकर्त्यासाठी स्थानिक CSS व्हेरिएबल्स तयार करेल . क्लासच्या नावापेक्षा वेगळे CSS व्हेरिएबल नाव सेट करण्यासाठी property: valueपर्यायी जोडा .css-variable-name

आमच्या .text-opacity-*उपयुक्ततेचा विचार करा. आम्ही css-variable-nameपर्याय जोडल्यास, आम्हाला एक सानुकूल आउटपुट मिळेल.

$utilities: (
  "text-opacity": (
    css-var: true,
    css-variable-name: text-alpha,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

आउटपुट:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 1; }

स्थानिक CSS व्हेरिएबल्स

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

महत्त्व

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

API वापरणे

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

युटिलिटीज ओव्हरराइड करा

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

$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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

उपयुक्तता सुधारित करा

$utilitiesडीफॉल्ट नकाशामध्ये map-getआणि map-mergeफंक्शन्ससह विद्यमान उपयुक्तता सुधारित करा . widthखालील उदाहरणामध्ये, आम्ही युटिलिटीजमध्ये अतिरिक्त मूल्य जोडत आहोत . आद्याक्षरासह प्रारंभ करा map-mergeआणि नंतर आपण कोणती उपयुक्तता सुधारित करू इच्छिता ते निर्दिष्ट करा. तेथून, युटिलिटीचे पर्याय आणि मूल्ये ऍक्सेस करण्यासाठी आणि सुधारित करण्यासाठी नेस्टेड "width"नकाशा आणा.map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

प्रतिसाद सक्षम करा

डिफॉल्टनुसार सध्या रिस्पॉन्सिव्ह नसलेल्या युटिलिटीजच्या विद्यमान सेटसाठी तुम्ही रिस्पॉन्सिव्ह क्लासेस सक्षम करू शकता. उदाहरणार्थ, borderवर्गांना प्रतिसाद देण्यासाठी:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

हे आता प्रत्येक ब्रेकपॉइंटचे .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/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

उपयुक्तता काढा

map-remove()Sass फंक्शनसह कोणतीही डीफॉल्ट उपयुक्तता काढून टाका .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

युटिलिटी काढून टाकण्यासाठी तुम्ही map-merge()Sass फंक्शन देखील वापरू शकता आणि ग्रुप की सेट करू शकता.null

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

@import "bootstrap/scss/utilities/api";

जोडा, काढा, सुधारा

map-merge()Sass फंक्शनसह तुम्ही एकाच वेळी अनेक उपयुक्तता जोडू, काढू आणि सुधारू शकता . तुम्ही मागील उदाहरणे एका मोठ्या नकाशामध्ये कशी एकत्र करू शकता ते येथे आहे.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

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नियंत्रण निर्देशांबद्दल धन्यवाद .