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کنټرول لارښود څخه مننه .