يوٽيلٽي API

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

هن صفحي تي

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

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

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

رياستون

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

افاديت کي تبديل ڪرڻ

ساڳي ڪيچ استعمال ڪندي موجوده افاديت کي ختم ڪريو. مثال طور، جيڪڏھن توھان چاھيو ٿا اضافي جوابي اوور فلو يوٽيلٽي ڪلاس، توھان ھي ڪري سگھو ٿا:

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