Utility API

یوټیلټي API د یوټیلټي ټولګیو رامینځته کولو لپاره د Sass پر بنسټ وسیله ده.

په دې پاڼه کې

د بوټسټریپ اسانتیاوې زموږ د یوټیلټي API سره رامینځته شوي او د Sass له لارې زموږ د یوټیلټي ټولګیو ډیفالټ سیټ ترمیم یا غزولو لپاره کارول کیدی شي. زموږ د افادیت API د مختلف انتخابونو سره د ټولګیو کورنیو رامینځته کولو لپاره د Sass نقشو او دندو د لړۍ پراساس دی. که تاسو د Sass نقشو سره نا اشنا یاست، د پیل کولو لپاره رسمي Sass اسنادو کې ولولئ .

نقشه زموږ $utilitiesټولې اسانتیاوې لري او وروسته ستاسو د دودیز $utilitiesنقشې سره یوځای کیږي، که شتون ولري. د کارونې نقشه د یوټیلټي ګروپونو کلیدي لیست لري کوم چې لاندې اختیارونه مني:

اختیار	ډول	تفصیل
`property`	اړین دی	د ملکیت نوم، دا کیدای شي یو تار یا د تارونو لړۍ وي (د بیلګې په توګه، افقی پیډینګ یا حاشیه).
`values`	اړین دی	د ارزښتونو لیست، یا نقشه که تاسو نه غواړئ د ټولګي نوم د ارزښت په څیر وي. که چیرې `null`د نقشې کیلي په توګه کارول کیږي، دا نه دی ترتیب شوی.
`class`	اختیاري	د ټولګي نوم لپاره متغیر که تاسو نه غواړئ دا د ملکیت په څیر وي. په هغه صورت کې چې تاسو `class`کیلي نه ورکوئ او `property`کیلي د تارونو لړۍ ده، د ټولګي نوم به د `property`صف لومړی عنصر وي.
`state`	اختیاري	د سوډو کلاس ډولونو لیست لکه `:hover`یا `:focus`د کارونې لپاره تولید کول. هیڅ ډیفالټ ارزښت نلري.
`responsive`	اختیاري	بولین په ګوته کوي که ځواب ورکوونکي ټولګي تولید ته اړتیا ولري. `false`په ترتیب سره.
`rfs`	اختیاري	بولین د مایع بیاکتنې وړ کولو لپاره. د RFS پاڼې ته یو نظر وګورئ ترڅو ومومئ چې دا څنګه کار کوي. `false`په ترتیب سره.
`print`	اختیاري	بولین دا په ګوته کوي چې آیا د چاپ ټولګي باید تولید شي. `false`په ترتیب سره.
`rtl`	اختیاري	بولین دا په ګوته کوي چې آیا ګټه باید په RTL کې وساتل شي. `true`په ترتیب سره.

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; }

د دودیز ټولګي مختګ

classپه ترتیب شوي CSS کې کارول شوي ټولګي مخکینۍ بدلولو لپاره اختیار وکاروئ :

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

محصول:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

ایالتونه

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; }
}

د اسانتیاوو بدلول

د ورته کیلي په کارولو سره موجوده اسانتیاوې له سره وګرځوئ. د مثال په توګه، که تاسو غواړئ اضافي ځواب ورکوونکي اوور فلو یوټیلټي ټولګي، تاسو دا کولی شئ:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

د چاپ اسانتیاوې

د 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نوې اسانتیاوې په ډیفالټ نقشه کې د a سره اضافه کیدی شي 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-*یوټیلټیز نوم زاړه ته بدلولو لپاره .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کنټرول لارښود څخه مننه .