یوٹیلیٹی API

یوٹیلیٹی API یوٹیلیٹی کلاسز بنانے کے لیے Sass پر مبنی ٹول ہے۔

اس صفحہ پر

بوٹسٹریپ یوٹیلیٹیز ہمارے یوٹیلیٹی 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-*یوٹیلیٹیز کا نام تبدیل کر کے oldish .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کنٹرول ڈائریکٹو کی بدولت ۔