يوٽيلٽي API
يوٽيليٽي API يوٽيلٽي ڪلاسز ٺاهڻ لاءِ Sass تي ٻڌل اوزار آهي.
Bootstrap افاديت اسان جي يوٽيلٽي API سان ٺاهيا ويا آهن ۽ استعمال ڪري سگھجن ٿا اسان جي ڊفالٽ سيٽ يوٽيلٽي ڪلاسز کي Sass ذريعي تبديل ڪرڻ يا وڌائڻ لاءِ. اسان جي يوٽيلٽي API مختلف اختيارن سان ڪلاسن جي خاندانن کي پيدا ڪرڻ لاءِ Sass نقشن ۽ افعال جي ھڪڙي سيريز تي ٻڌل آھي. جيڪڏهن توهان ساس نقشن کان ناواقف آهيو، شروع ڪرڻ لاءِ سرڪاري Sass دستاويزن تي پڙهو .
نقشي ۾ $utilities
اسان جون سڀئي افاديتون شامل آھن ۽ پوءِ $utilities
جيڪڏھن موجود ھجي ته توھان جي ڪسٽم نقشي سان ملائي ويندي. يوٽيلٽي ميپ ۾ يوٽيلٽي گروپن جي هڪ اهم فهرست شامل آهي جيڪي هيٺين اختيارن کي قبول ڪن ٿا:
اختيار | قسم | ڊفالٽ قدر | وصف |
---|---|---|---|
property |
گهربل | - | ملڪيت جو نالو، اھو ٿي سگھي ٿو ھڪڙو تار يا تارن جي ھڪڙي صف (مثال طور، افقي پيڊنگ يا مارجن). |
values |
گهربل | - | قدرن جي فهرست، يا نقشو جيڪڏھن توھان نٿا چاھيو ته ڪلاس جو نالو قدر جي برابر ھجي. جيڪڏهن null نقشي جي ڪنجي طور استعمال ڪيو وڃي، اهو مرتب نه ڪيو ويو آهي. |
class |
اختياري | null | ٺاهيل طبقي جو نالو. جيڪڏهن مهيا نه ڪئي وئي property آهي ۽ اسٽرنگ جي هڪ صف آهي، class ڊفالٽ جي پهرين عنصر ڏانهن ويندي property . |
css-var |
اختياري | false |
Boolean CSS قاعدن جي بدران 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; }
CSS متغير افاديت
css-var
boolean آپشن کي سيٽ ڪريو ۽ 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
Sass نقشي جي وضاحت ڪرڻ لاءِ اختيار استعمال ڪريو جيڪو يوٽيلٽي ڪلاس جي اصولن ۾ مقامي 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
pseudo-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/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
ڪنٽرول هدايت جي مهرباني .