APIی سوودمەندی

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

لەم پەیجەدا

سوودمەندییەکانی بووتستراپ بە APIی سوودمەندی ئێمە دروست دەکرێن و دەتوانرێت بەکاربهێنرێت بۆ دەستکاریکردن یان درێژکردنەوەی کۆمەڵەی پێشوەختەی پۆلەکانی سوودمەندیمان لە ڕێگەی Sass. API سوودبەخشەکەمان لەسەر بنەمای زنجیرەیەک نەخشە و فەنکشنی Sass بۆ دروستکردنی خێزانەکانی پۆلەکان بە بژاردەی جۆراوجۆر دامەزراوە. ئەگەر بە نەخشەکانی ساس ئاشنا نیت، لە دۆکیومێنتە فەرمییەکانی ساس بخوێنەرەوە بۆ ئەوەی دەست پێ بکەیت.

$utilitiesنەخشەکە هەموو سوودمەندیەکانمان لەخۆدەگرێت و دواتر لەگەڵ نەخشەی تایبەتتدا تێکەڵ دەکرێت ، $utilitiesئەگەر هەبێت. نەخشەی سوودمەندیەکان لیستی کلیلدار لە گروپەکانی سوودمەندی لەخۆدەگرێت کە ئەم هەڵبژاردنانەی خوارەوە قبوڵ دەکەن:

بژاردە	جۆر	بةهاى دواكةوتن	وەسف
`property`	داواکراو	–	ناوی تایبەتمەندییەکە، ئەمە دەتوانێت ڕیزێک بێت یان ڕیزێک لە ڕیزەکان (بۆ نموونە، پادکردنی ئاسۆیی یان پەراوێز).
`values`	داواکراو	–	لیستی بەهاکان، یان نەخشەیەک ئەگەر ناتەوێت ناوی پۆلەکە وەک بەهاکە بێت. ئەگەر `null`وەک کلیلی نەخشە بەکارهات، ئەوا کۆناکرێتەوە.
`class`	ئارەزوومەندانە	هیچ	ناوی پۆلی دروستکراو. ئەگەر دابین نەکرابێت و `property`ڕیزبەندییەک بێت لە ڕیزەکان، `class`بە پێشوەختە دەبێت بۆ یەکەم توخم لە `property`ڕیزبەندەکە.
`css-var`	ئارەزوومەندانە	`false`	بولی بۆ دروستکردنی گۆڕاوەی CSS لەبری یاساکانی CSS.
`local-vars`	ئارەزوومەندانە	هیچ	نەخشەی گۆڕاوە ناوخۆییەکانی CSS بۆ دروستکردن جگە لە یاساکانی CSS.
`state`	ئارەزوومەندانە	هیچ	لیستی جۆرەکانی پۆلی ساختە (بۆ نموونە، `: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دەبێت لە ناو و یاساکانی پۆلی دروستکراودا بەکاربهێنرێت. دەتوانێت لیستێک یان نەخشەیەک بێت (لە سوودمەندییەکان یان لە گۆڕاوێکی ساسدا دانراوە).

وەک لیستێک، وەک لەگەڵ 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 دابنێ trueو API گۆڕاوە ناوخۆییەکانی 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 لە یاساکانی 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بۆ دروستکردنی گۆڕانکارییەکانی پۆلی ساختە. نموونەی پۆلە ساختەکان بریتین لە :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; }
}

چاپکردن

هەروەها چالاککردنی 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و پاشان دیاری بکە کە دەتەوێت کام سوودمەندی دەستکاری بکەیت. لەوێشەوە "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 .