APIی سوودمەندی

API ی سوودمەند ئامرازێکی بنەمادارە لەسەر Sass بۆ دروستکردنی پۆلەکانی سوودمەندی.

لەم پەیجەدا

سوودمەندییەکانی بووتستراپ بە APIی سوودمەندی ئێمە دروست دەکرێن و دەتوانرێت بەکاربهێنرێت بۆ دەستکاریکردن یان درێژکردنەوەی کۆمەڵەی پێشوەختەی پۆلەکانی سوودمەندیمان لە ڕێگەی Sass. API سوودبەخشەکەمان لەسەر بنەمای زنجیرەیەک نەخشە و فەنکشنی 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بۆ دروستکردنی گۆڕانکارییەکانی پۆلی ساختە. نموونەی پۆلە ساختەکان بریتین لە :hoverو :focus. کاتێک لیستی دۆخەکان دابین دەکرێت، ناوی پۆلەکان بۆ ئەو پۆلە ساختەیە دروست دەکرێن. بۆ نموونە بۆ گۆڕینی opacity لەسەر hover زیاد بکە 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نەخشەی پێشوەختە بە 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سوودمەندییەکانمان، a دروست بکە و لەناوەوە $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 دەرنادات، بەهۆی ڕێنمایی کۆنترۆڵکردنی RTLCSSremove .