Utility API
یوټیلټي API د یوټیلټي ټولګیو رامینځته کولو لپاره د Sass میشته وسیله ده.
د بوټسټریپ اسانتیاوې زموږ د یوټیلټي API سره رامینځته شوي او د Sass له لارې زموږ د یوټیلټي ټولګیو ډیفالټ سیټ ترمیم یا غزولو لپاره کارول کیدی شي. زموږ د افادیت API د مختلف انتخابونو سره د ټولګیو کورنیو رامینځته کولو لپاره د Sass نقشو او دندو د لړۍ پراساس دی. که تاسو د Sass نقشو سره نا اشنا یاست، د پیل کولو لپاره رسمي Sass اسنادو کې ولولئ .
نقشه زموږ $utilities
ټولې اسانتیاوې لري او وروسته ستاسو د دودیز $utilities
نقشې سره یوځای کیږي، که شتون ولري. د کارونې نقشه د یوټیلټي ګروپونو کلیدي لیست لري کوم چې لاندې اختیارونه مني:
اختیار | ډول | ډیفالټ ارزښت | تفصیل |
---|---|---|---|
property |
اړین دی | – | د ملکیت نوم، دا کیدای شي یو تار یا د تارونو لړۍ وي (د بیلګې په توګه، افقی پیډینګ یا حاشیه). |
values |
اړین دی | – | د ارزښتونو لیست، یا نقشه که تاسو نه غواړئ د ټولګي نوم د ارزښت په څیر وي. که چیرې null د نقشې کیلي په توګه کارول کیږي، class د ټولګي نوم ته مخکې نه لیکل کیږي. |
class |
اختیاري | null | د تولید شوي ټولګي نوم. که چمتو شوی نه وي او property د تارونو لړۍ وي، د سري class لومړي عنصر ته به ډیفالټ شي property . که چمتو نه وي او property تار وي، values کلیدونه د class نومونو لپاره کارول کیږي. |
css-var |
اختیاري | false |
بولین د سی ایس ایس قواعدو پرځای د سی ایس ایس متغیرونو رامینځته کولو لپاره. |
css-variable-name |
اختیاري | null | د مقرراتو دننه د CSS متغیر لپاره دودیز غیر مخکینۍ نوم. |
local-vars |
اختیاري | null | د سی ایس ایس قواعدو سربیره د تولید لپاره د محلي CSS متغیرونو نقشه. |
state |
اختیاري | null | د تولید لپاره د سیډو کلاس ډولونو لیست (لکه، :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-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; }
سیمه ایز سی ایس ایس متغیرونه
د Sass نقشه مشخص کولو لپاره اختیار وکاروئ 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
د pseudo-class تغیراتو د پیدا کولو لپاره اختیار وکاروئ . د بېلګې په توګه pseudo- classes دي :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
نوې اسانتیاوې په ډیفالټ نقشه کې د a سره اضافه کیدی شي 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-*
یوټیلټیز نوم زاړه ته بدلولو لپاره .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
کنټرول لارښود څخه مننه .