یوٹیلیٹی API
یوٹیلیٹی API یوٹیلیٹی کلاسز بنانے کے لیے Sass پر مبنی ٹول ہے۔
بوٹسٹریپ یوٹیلیٹیز ہمارے یوٹیلیٹی API کے ساتھ تیار کی جاتی ہیں اور Sass کے ذریعے یوٹیلیٹی کلاسز کے ہمارے ڈیفالٹ سیٹ میں ترمیم یا توسیع کے لیے استعمال کی جا سکتی ہیں۔ ہمارا یوٹیلیٹی API مختلف اختیارات کے ساتھ کلاسز کے خاندانوں کو پیدا کرنے کے لیے Sass نقشوں اور افعال کی ایک سیریز پر مبنی ہے۔ اگر آپ Sass کے نقشوں سے ناواقف ہیں تو شروع کرنے کے لیے سرکاری Sass دستاویزات کو پڑھیں۔
نقشہ ہماری تمام افادیت پر مشتمل ہے اور اگر موجود ہو تو $utilities
اسے بعد میں آپ کے حسب ضرورت $utilities
نقشے کے ساتھ ملا دیا جاتا ہے۔ یوٹیلیٹی میپ میں یوٹیلیٹی گروپس کی کلیدی فہرست ہوتی ہے جو درج ذیل آپشنز کو قبول کرتے ہیں:
آپشن | قسم | پہلے سے طے شدہ قیمت | تفصیل |
---|---|---|---|
property |
درکار ہے۔ | - | پراپرٹی کا نام، یہ سٹرنگ یا تاروں کی ایک صف ہو سکتی ہے (مثال کے طور پر، افقی پیڈنگ یا مارجن)۔ |
values |
درکار ہے۔ | - | اقدار کی فہرست، یا نقشہ اگر آپ نہیں چاہتے ہیں کہ کلاس کا نام قدر کے برابر ہو۔ اگر null نقشہ کی کلید کے طور پر استعمال کیا جاتا ہے، تو یہ مرتب نہیں ہوتا ہے۔ |
class |
اختیاری | خالی | تیار کردہ کلاس کا نام۔ اگر فراہم نہیں کی گئی ہے اور property سٹرنگز کی ایک صف ہے، class تو پہلے سے طے شدہ صف کے پہلے عنصر پر ہو گی property ۔ |
css-var |
اختیاری | false |
سی ایس ایس قوانین کی بجائے سی ایس ایس متغیرات بنانے کے لیے بولین۔ |
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; }
CSS متغیر افادیت
css-var
بولین آپشن کو سیٹ کریں اور API دیے گئے سلیکٹر کے لیے معمول کے قواعد true
کی بجائے مقامی CSS متغیرات تیار کرے گا ۔ ہماری افادیت property: value
پر غور کریں :.text-opacity-*
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
آؤٹ پٹ:
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 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/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
کنٹرول ڈائریکٹو کی بدولت ۔