उपयुक्तताय एपीआय

उपयुक्तताय एपीआय हें उपयुक्तताय वर्ग तयार करपाक Sass-आधारीत साधन आसा.

ह्या पानाचेर

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

नकाशांत आमचीं सगळीं उपयुक्तताय आसात आनी उपरांत तुमच्या सानुकूल नकाशा $utilitiesवांगडा विलीन जाता , जर हाजीर आसल्यार. $utilitiesउपयुक्तताय नकाशांत उपयुक्तताय गटांची की केल्ली वळेरी आसता जी सकयल दिल्ले पर्याय स्वीकारतात:

पर्याय	प्रकार	मुलभूत मोल	वर्णन
`property`	गरजेचें	– 1 .	गुणधर्माचे नांव, ही स्ट्रिंग वा स्ट्रिंगांची सरणी आसूं येता (देखीक, आडवे पॅडिंग वा मार्जिन).
`values`	गरजेचें	– 1 .	मोलांची वळेरी, वा तुमकां वर्गाचें नांव मोला सारकें आसचें ना जाल्यार नकासो. `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 त दवरची काय ना तें दाखोवपी बूलियन.

एपीआय हांणी स्पश्ट केलें

$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,
)

आमच्या positionउपयुक्तताय प्रमाणें, वळेरी वा नकासो सेट करपी Sass व्हेरिएबल म्हणून :

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

If class: null, दरेक कळयेखातीर वर्ग तयार करता values:

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

उत्पादन: 1 .

.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
    )
  ),
);

उत्पादन: 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 चड-उणें

local-varsउपयुक्तताय वर्गाच्या नेमसंग्रहांत थळावे CSS चड-उणें निर्माण करपी Sass नकासो निर्देशीत करपाक पर्याय वापरात . उपकार करून लक्षांत दवरात की तयार केल्ल्या CSS नेमांत त्या थळाव्या 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तुमच्या संकलित CSS मदीं मेळटले.

एका परस चड छद्म वर्गांची गरज आसा? राज्यांची सुवात वेगळी केल्ली वळेरी वापरात: 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; }
}

म्हत्व आसा

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

एपीआय वापरप

आतां तुमकां उपयुक्तताय 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 उत्पादनांतल्यान सोडूं येता 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 */

हाका लागून RTL त कांयच आउटपुट जायना, RTLCSS removeनियंत्रण निर्देशाक लागून .