یوٹیلیٹی API

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

اس صفحہ پر

بوٹسٹریپ یوٹیلیٹیز ہمارے یوٹیلیٹی API کے ساتھ تیار کی جاتی ہیں اور Sass کے ذریعے یوٹیلیٹی کلاسز کے ہمارے ڈیفالٹ سیٹ میں ترمیم یا توسیع کے لیے استعمال کی جا سکتی ہیں۔ ہمارا یوٹیلیٹی API مختلف اختیارات کے ساتھ کلاسز کے خاندانوں کو پیدا کرنے کے لیے Sass نقشوں اور افعال کی ایک سیریز پر مبنی ہے۔ اگر آپ Sass کے نقشوں سے ناواقف ہیں تو شروع کرنے کے لیے سرکاری Sass دستاویزات کو پڑھیں۔

نقشہ ہماری تمام افادیت پر مشتمل ہے اور اگر موجود ہو تو $utilitiesاسے بعد میں آپ کے حسب ضرورت $utilitiesنقشے کے ساتھ ملا دیا جاتا ہے۔ یوٹیلیٹی میپ میں یوٹیلیٹی گروپس کی کلیدی فہرست ہوتی ہے جو درج ذیل آپشنز کو قبول کرتے ہیں:

آپشن	قسم	پہلے سے طے شدہ قیمت	تفصیل
`property`	درکار ہے۔	-	پراپرٹی کا نام، یہ سٹرنگ یا تاروں کی ایک صف ہو سکتی ہے (مثال کے طور پر، افقی پیڈنگ یا مارجن)۔
`values`	درکار ہے۔	-	اقدار کی فہرست، یا نقشہ اگر آپ نہیں چاہتے ہیں کہ کلاس کا نام قدر کے برابر ہو۔ اگر `null`نقشہ کی کلید کے طور پر استعمال کیا جاتا ہے، `class`تو کلاس کے نام سے پہلے نہیں کیا جاتا ہے۔
`class`	اختیاری	خالی	تیار کردہ کلاس کا نام۔ اگر فراہم نہیں کی گئی ہے اور `property`سٹرنگز کی ایک صف ہے، `class`تو پہلے سے طے شدہ صف کے پہلے عنصر پر ہو گی `property`۔ اگر فراہم نہیں کی گئی `property`ہے اور ایک تار ہے، تو ناموں `values`کے لیے چابیاں استعمال کی جاتی ہیں۔`class`
`css-var`	اختیاری	`false`	سی ایس ایس قوانین کی بجائے سی ایس ایس متغیرات بنانے کے لیے بولین۔
`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 متغیرات

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