يوٽيلٽي API

يوٽيليٽي API يوٽيلٽي ڪلاسز ٺاهڻ لاءِ Sass تي ٻڌل اوزار آهي.

هن صفحي تي

Bootstrap افاديت اسان جي يوٽيلٽي API سان ٺاهيا ويا آهن ۽ استعمال ڪري سگھجن ٿا اسان جي ڊفالٽ سيٽ يوٽيلٽي ڪلاسز کي Sass ذريعي تبديل ڪرڻ يا وڌائڻ لاءِ. اسان جي يوٽيلٽي API مختلف اختيارن سان ڪلاسن جي خاندانن کي پيدا ڪرڻ لاءِ Sass نقشن ۽ افعال جي ھڪڙي سيريز تي ٻڌل آھي. جيڪڏهن توهان ساس نقشن کان ناواقف آهيو، شروع ڪرڻ لاءِ سرڪاري Sass دستاويزن تي پڙهو .

نقشي ۾ $utilitiesاسان جون سڀئي افاديتون شامل آھن ۽ پوءِ $utilitiesجيڪڏھن موجود ھجي ته توھان جي ڪسٽم نقشي سان ملائي ويندي. يوٽيلٽي ميپ ۾ يوٽيلٽي گروپن جي هڪ اهم فهرست شامل آهي جيڪي هيٺين اختيارن کي قبول ڪن ٿا:

اختيار	قسم	ڊفالٽ قدر	وصف
`property`	گهربل	-	ملڪيت جو نالو، اھو ٿي سگھي ٿو ھڪڙو تار يا تارن جي ھڪڙي صف (مثال طور، افقي پيڊنگ يا مارجن).
`values`	گهربل	-	قدرن جي فهرست، يا نقشو جيڪڏھن توھان نٿا چاھيو ته ڪلاس جو نالو قدر جي برابر ھجي. جيڪڏهن `null`نقشي جي چاٻي جي طور تي استعمال ڪيو `class`ويو آهي، طبقي جي نالي جي اڳيان نه آهي.
`class`	اختياري	null	ٺاهيل طبقي جو نالو. جيڪڏهن مهيا نه ڪئي وئي `property`آهي ۽ اسٽرنگ جي هڪ صف آهي، `class`ڊفالٽ جي پهرين عنصر ڏانهن ويندي `property`. جيڪڏهن مهيا نه ڪئي وئي `property`آهي ۽ هڪ اسٽرنگ آهي، `values`ڪنجيون `class`نالن لاء استعمال ڪيون وينديون آهن.
`css-var`	اختياري	`false`	Boolean CSS قاعدن جي بدران CSS متغير پيدا ڪرڻ لاءِ.
`css-variable-name`	اختياري	null	ضابطي جي اندر CSS متغير لاءِ حسب ضرورت غير اڳڀرائي وارو نالو.
`local-vars`	اختياري	null	سي ايس ايس قاعدن کان علاوه پيدا ڪرڻ لاءِ مقامي CSS متغيرن جو نقشو.
`state`	اختياري	null	pseudo-class variants جي فهرست (مثال طور، `:hover`يا `:focus`) پيدا ڪرڻ لاءِ.
`responsive`	اختياري	`false`	Boolean اشارو ڪري ٿو ته جوابي طبقن کي پيدا ڪيو وڃي.
`rfs`	اختياري	`false`	RFS سان فلوئڊ ريسڪلنگ کي فعال ڪرڻ لاءِ بولان .
`print`	اختياري	`false`	Boolean اشارو ڪري ٿو ته ڇا پرنٽ ڪلاس ٺاهڻ جي ضرورت آهي.
`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 variable ۾).

ھڪڙي فهرست جي طور تي، 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-varboolean آپشن کي سيٽ ڪريو ۽ 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 متغير

local-varsSass نقشي جي وضاحت ڪرڻ لاءِ اختيار استعمال ڪريو جيڪو يوٽيلٽي ڪلاس جي اصولن ۾ مقامي 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;
}

رياستون

statepseudo-class variations پيدا ڪرڻ لاءِ اختيار استعمال ڪريو . مثال pseudo-classes آهن :hover۽ :focus. جڏهن رياستن جي هڪ فهرست مهيا ڪئي وئي آهي، ڪلاس جا نالا ٺاهيا ويا آهن ان pseudo-ڪلاس لاءِ. مثال طور، هور تي اوپيسيٽي کي تبديل ڪرڻ لاء، شامل ڪريو state: hover۽ توهان .opacity-hover:hoverپنهنجي مرتب ڪيل CSS ۾ حاصل ڪندا.

گھڻن pseudo-ڪلاس جي ضرورت آهي؟ رياستن جي اسپيس کان الڳ ڪيل فهرست استعمال ڪريو: 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۽ پوءِ وضاحت ڪريو ته ڪھڙي افاديت کي توھان تبديل ڪرڻ چاھيو ٿا. اتان کان، nested "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ڪنٽرول هدايت جي مهرباني .