کۆچکردن بۆ v5

وابەستەییەکان

• jQuery ی کەوتە خوارەوە.
• لە Popper v1.xەوە بەرزکراوەتەوە بۆ Popper v2.x.
• Libsass ی گۆڕی بە Dart Sass وەک کۆمپایەری Sass ی ئێمە بە پێدانی Libsass بەکارنەهاتووە.
• لە جێکیلەوە کۆچمان کرد بۆ هوگۆ بۆ دروستکردنی بەڵگەنامەکانمان

پشتگیری وێبگەڕ

• ئینتەرنێت ئێکسپلۆرەری ١٠ و ١١ی وەلا هێنا
• مایکرۆسۆفت ئێدج < 16 (Legacy Edge) دابەزیوە
• فایەرفۆکس < 60 دابەزاند
• سەفاری دابەزیوە < 12
• سەفاری iOS < 12 دابەزی
• کرۆمی دابەزیوە < 60

---

گۆڕانکاری لە بەڵگەنامەکاندا دەکرێت

• دووبارە دیزاین کراوەتەوە بۆ ماڵپەڕ و شێوازی دۆکیومێنتەکان و ژێرەوە.
• ڕێنمایی نوێی پارسێل زیادکرا .
• بەشی نوێی Customize زیادکرا , جێگەی لاپەڕەی Theming ی v4 دەگرێتەوە , بە وردەکاری نوێ لەسەر Sass، هەڵبژاردەکانی ڕێکخستنی جیهانی، پلانی ڕەنگەکان، گۆڕاوەکانی CSS و زۆر شتی تر.
• هەموو بەڵگەنامەکانی فۆڕم ڕێکخستەوە بۆ بەشی نوێی فۆڕمەکان , ناوەڕۆکەکەی جیاکردەوە بۆ لاپەڕەی زیاتر تەرکیزکراو.
• بە هەمان شێوە، بەشی Layout نوێکرایەوە , بۆ ئەوەی ناوەڕۆکی تۆڕەکە بە ڕوونیتر گۆشت بکات.
• ناوی لاپەڕەی پێکهاتەی “Navs” گۆڕدرا بۆ “Navs & Tabs”.
• ناوی لاپەڕەی “Checks” گۆڕدرا بۆ “Checks & radios”.
• دیزاینێکی نوێی navbar ی کردەوە و subnav ێکی نوێمان زیاد کرد بۆ ئەوەی ئاسانتر بە دەوری سایتەکانمان و وەشانی docs ـەکانماندا بگەڕێیت.
• زیادکردنی کورتکراوەی نوێی کیبۆرد بۆ بواری گەڕان: Ctrl + /.

ساس

• ئێمە تێکەڵکردنی نەخشەی پێشوەختەی Sassمان لابردووە بۆ ئەوەی ئاسانتر بەها زیادەکان لاببەین. لەبیرت بێت ئێستا دەبێت هەموو بەهاکان لە نەخشەکانی ساسدا پێناسە بکەیت وەک $theme-colors. سەیری چۆنیەتی مامەڵەکردن لەگەڵ نەخشەکانی ساس بکە .

• شکاندنcolor-yiq()ناوی فەنکشن و گۆڕاوە پەیوەندیدارەکان گۆڕدرا بۆ color-contrast()وەک ئەوەی چیتر پەیوەندی بە YIQ colorspace نییە. سەیری #30168 بکە.

  • $yiq-contrasted-thresholdناوی گۆڕاوە بۆ $min-contrast-ratio.
  • $yiq-text-darkو $yiq-text-lightبە رێککەوت ناویان گۆڕدراوە بۆ $color-contrast-darkو $color-contrast-light.

• شکاندنپارامێتەرەکانی میکسینەکانی پرسیاری میدیا گۆڕاون بۆ رێبازێکی لۆژیکیتر.

  • media-breakpoint-down()خاڵی شکاندن خۆی بەکاردەهێنێت لەبری خاڵی شکاندنی داهاتوو (بۆ نموونە، media-breakpoint-down(lg)لەبری ئەوەی media-breakpoint-down(md)دەرچەی بینینی ئامانجەکان بچووکتر بێت لە lg).
  • بە هەمان شێوە، پارامێتری دووەم لە media-breakpoint-between()هەروەها خاڵی شکاندن خۆی بەکاردەهێنێت لەبری خاڵی شکاندنی داهاتوو (بۆ نموونە، media-between(sm, lg)لەبری media-breakpoint-between(sm, md)ئامانجەکانی بینینی دەروازەکانی نێوان smو lg).

• شکاندنستایلەکانی چاپکردن و $enable-print-stylesگۆڕاوەکان لابراون. پۆلەکانی پیشاندانی چاپکردن هێشتا لە دەوروبەردان. سەیری #28339 بکە .

• شکاندنcolor(), theme-color(), و فەنکشنەکانی gray()لە بەرژەوەندی گۆڕاوەکان دابەزاندووە. سەیری #29083 بکە .

• شکاندنtheme-color-level()ناوی فەنکشنەکە گۆڕدراوە بۆ و color-level()ئێستا هەر ڕەنگێک کە بتەوێت لەبری تەنها $theme-colorڕەنگەکان وەریدەگرێت. سەیری #29083 بکە ئاگاداربە: color-level() دواتر لە کەوتە خوارەوە v5.0.0-alpha3.

• شکاندنناوی گۆڕاوە $enable-prefers-reduced-motion-media-queryو $enable-pointer-cursor-for-buttonsبۆ $enable-reduced-motionو $enable-button-pointersبۆ کورتی.

• شکاندنbg-gradient-variant()میکسینەکە دەرهێنرا . پۆلەکە بەکاربهێنە .bg-gradientبۆ زیادکردنی گرادێنت بۆ توخمەکان لەبری .bg-gradient-*پۆلە دروستکراوەکان.

• شکاندن میکسینەکان کە پێشتر بەکارنەهێنراون لابراون:

  • hover، hover-focus، plain-hover-focus، وhover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(هەروەها پۆلی سوودمەندی پەیوەندیدار وەلا هێنا، .text-hide)
  • visibility()
  • form-control-focus()

• شکاندنناوی scale-color()فەنکشنەکەی گۆڕاوە بۆ shift-color()بۆ ئەوەی بەریەک نەکەوتن لەگەڵ فەنکشنی قەبارەدانانی ڕەنگی تایبەتی ساس.

• box-shadowئێستا میکسینەکان ڕێگە بە nullبەهاکان دەدەن و noneلە چەندین ئارگومێنتەوە دابەزن. سەیری #30394 بکە .

• ئێستا border-radius()میکسینەکە بەهایەکی پێشوەختەی هەیە.

سیستەمی ڕەنگەکان

• سیستەمی ڕەنگەکان کە لەگەڵ سیستەمێکی ڕەنگی نوێ کاریان دەکرد color-level()و $theme-color-intervalلابرا. هەموو lighten()و darken()فەنکشنەکانی ناو بنکە کۆدەکانمان بە tint-color()و جێگیر دەکرێن shade-color(). ئەم ئەرکانە ڕەنگەکە تێکەڵ بە یان سپی یان ڕەش دەکەن لەبری ئەوەی سووکایەتییەکەی بە ڕێژەیەکی دیاریکراو بگۆڕن. ڕەنگێک یان ڕەنگ shift-color()دەکات یان سێبەری دەکات بەپێی ئەوەی کە ئایا پارامێتری کێشەکەی ئەرێنی بێت یان نەرێنی. بۆ زانیاری زیاتر سەیری #30622 بکە.

• زیادکردنی ڕەنگ و سێبەری نوێ بۆ هەموو ڕەنگێک، دابینکردنی نۆ ڕەنگی جیاوازی بۆ هەر ڕەنگێکی بنەڕەتی، وەک گۆڕاوە نوێیەکانی ساس.

• باشترکردنی کۆنتراستی ڕەنگەکان. ڕێژەی کۆنتراستی ڕەنگەکان لە 3:1 بۆ 4.5:1 بەرزکرایەوە و ڕەنگی شین و سەوز و سیان و پەمەیی نوێکرایەوە بۆ دڵنیابوون لە کۆنتراستی WCAG 2.1 AA. هەروەها ڕەنگی کۆنتراستی ڕەنگەکانمان لە $gray-900بۆ گۆڕیوە $black.

• tint-color()بۆ پشتگیری لە سیستەمی ڕەنگەکانمان، ئێمە تایبەتمەندی و فەنکشنی نوێمان زیاد کردووە shade-color()بۆ ئەوەی ڕەنگەکانمان بە شێوەیەکی گونجاو تێکەڵ بکەین.

نوێکارییەکانی تۆڕ

• خاڵی شکاندنی نوێ! xxlخاڵی شکاندنی نوێ زیادکرا بۆ 1400pxو سەرەوە. هیچ گۆڕانکارییەک لە هەموو خاڵەکانی تری شکاندندا نەکرێت.

• باشترکردنی کانیاوەکان. ئێستا کانیاوەکان لە rems دانراون، و تەسکترن لە v4 ( 1.5rem, یان about 24px, down from 30px). ئەمەش کانیەکانی سیستەمی تۆڕەکەمان لەگەڵ خزمەتگوزارییەکانی دوورکەوتنەوەمان ڕێکدەخات.

  • پۆلی نوێی کانیاوەکان زیادکرا ( .g-*, .gx-*, و .gy-*) بۆ کۆنترۆڵکردنی کانیاوەکانی ئاسۆیی/ڕاست، کانیاوەکانی ئاسۆیی، و کانیاوەکانی ڕاست.
  • شکاندنناوی گۆڕدراوە .no-guttersبۆ .g-0بۆ ئەوەی لەگەڵ خزمەتگوزارییە نوێیەکانی کانیاودا بگونجێت.

• ستوونەکان چیتر position: relativeکاریان نەکردووە، بۆیە ڕەنگە پێویستت بە زیادکردنی .position-relativeهەندێک توخم بێت بۆ گەڕاندنەوەی ئەو هەڵسوکەوتە.

• شکاندنچەند .order-*پۆلێکی وازی هێنا کە زۆرجار بەکارنەهێنران. ئێمە ئێستا تەنها .order-1بۆ .order-5دەرەوەی سندوق دابین دەکەین.

• شکاندنپێکهاتەکە کەوتە خوارەوە .mediaچونکە دەتوانرێت بە ئاسانی لەگەڵ سوودمەندیەکان دووبارە بکرێتەوە. بۆ نموونە سەیری #28265 و لاپەڕەی سوودمەندییەکانی فلیکس بکە .

• شکاندن bootstrap-grid.cssئێستا تەنها box-sizing: border-boxبۆ ستوونەکە کاردەکات لەبری ڕێستکردنی قەبارەی سندوقی جیهانی. بەم شێوەیە دەتوانرێت ستایلەکانی تۆڕەکەمان لە شوێنی زیاتر بەکاربهێنرێت بەبێ دەستێوەردان.

• $enable-grid-classesچیتر نەوەی پۆلەکانی کۆنتێنەر لەکار ناکات. سەیری #29146 بکە.

• میکسینەکە نوێکرایەوە make-colبۆ پێشوەختە بۆ ستوونی یەکسان بەبێ قەبارەی دیاریکراو.

ناوەڕۆک، Reboot و هتد

• ئێستا RFS بە شێوازی پێشوەختە چالاک کراوە. سەردێڕەکان کە میکسین بەکاردەهێننfont-size()بە شێوەیەکی ئۆتۆماتیکی خۆیان ڕێکدەخەنfont-sizeبۆ پێوەر لەگەڵ viewport. ئەم تایبەتمەندییە پێشتر لەگەڵ v4 هەڵبژێردرابوو.

• شکاندنتایپۆگرافیای نمایشەکەمان چاککردەوە بۆ گۆڕینی $display-*گۆڕاوەکانمان و بە $display-font-sizesنەخشەی ساس. هەروەها $display-*-weightگۆڕاوە تاکەکەسییەکان بۆ یەک s $display-font-weightو ڕێکخراو لابران.font-size

• دوو .display-*قەبارەی سەردێڕی نوێ زیادکرا، .display-5و .display-6.

• بەستەرەکان بە شێوازی پێشوەختە هێڵکاری کراون (نەک تەنها لەسەر هۆڤەر)، مەگەر بەشێک نەبن لە پێکهاتە تایبەتەکان.

• خشتەکان دیزاین کراوەتەوە بۆ نوێکردنەوەی ستایلەکانیان و دووبارە دروستکردنەوەیان بە گۆڕاوەکانی CSS بۆ کۆنترۆڵی زیاتر لەسەر ستایلکردن.

• شکاندنخشتەکانی هێلانەکراو ئیتر ستایلەکان بە میرات ناگرن.

• شکاندن .thead-lightو .thead-darkلە بەرژەوەندی .table-*پۆلە گۆڕاوەکاندا لادەبرێن کە دەتوانرێت بۆ هەموو توخمەکانی خشتەکە بەکاربهێنرێت ( thead, tbody, tfoot, tr, thو td).

• شکاندنناوی table-row-variant()میکسینەکە دەگۆڕدرێت بۆ table-variant()و تەنها ٢ پارامێتەر قبوڵ دەکات: $color(ناوی ڕەنگ) و $value(کۆدی ڕەنگ). ڕەنگی سنوور و ڕەنگی لەهجە بە شێوەیەکی ئۆتۆماتیکی بە پشتبەستن بە گۆڕاوە فاکتەری خشتەکە حیسابی بۆ دەکرێت.

• گۆڕاوەکانی پادکردنی خانەی خشتەکە دابەش بکە بۆ -yو -x.

• شکاندن.pre-scrollableپۆلی وازی هێناوە . سەیری #29135 بکە

• شکاندن .text-*سوودمەندیەکان ئیتر دۆخی hover و focus زیاد ناکەن بۆ بەستەرەکان. .link-*دەتوانرێت لەبری ئەوە پۆلەکانی یارمەتیدەر بەکاربهێنرێت. سەیری #29267 بکە

• شکاندن.text-justifyپۆلی وازی هێناوە . سەیری #29793 بکە

• ڕێستکردنی پێشوەختەی ئاسۆیی padding-lefton <ul>و <ol>توخمەکان لە پێشوەختەی وێبگەڕەوە 40pxبۆ 2rem.

• زیادکراوە $enable-smooth-scroll، کە لە ئاستی جیهانیدا کارپێدەکرێت scroll-behavior: smooth-جگە لەو بەکارهێنەرانەی کە داوای کەمکردنەوەی جووڵە دەکەن لە ڕێگەی prefers-reduced-motionپرسیاری میدیاوە. سەیری #31877 بکە

RTL

• گۆڕاوە تایبەتەکانی ئاراستەی ئاسۆیی، سوودمەندیەکان و میکسینەکان هەموویان ناویان گۆڕاوە بۆ بەکارهێنانی تایبەتمەندییە لۆژیکییەکان وەک ئەوانەی لە نەخشەکانی فلێکسبۆکسدا دەبینرێن- بۆ نموونە، startو endلە جیاتی leftو right.

فۆڕمەکان

• فۆڕمی نوێی شلۆق زیادکرا! ئێمە نموونەی ناوەکانی شلۆقمان بەرزکردۆتەوە بۆ پێکهاتەکانی فۆڕمی تەواو پشتگیریکراو. سەیری لاپەڕەی نوێی ناوە شلۆقەکان بکە.

• شکاندن توخمەکانی فۆڕمی ڕەسەن و تایبەتمەندی یەکخراو. بۆکسەکانی هەڵبژاردن، ڕادیۆ، هەڵبژێردراوەکان و زانیارییەکانی تر کە پۆلی ڕەسەن و تایبەتیان لە v4دا هەبووە یەکخراون. ئێستا نزیکەی هەموو توخمەکانی فۆڕمەکەمان بە تەواوی تایبەتمەندن، زۆربەیان بەبێ پێویستی بە HTML تایبەتمەند.

  • .custom-checkئێستایە .form-check.
  • .custom-check.custom-switchئێستایە .form-check.form-switch.
  • .custom-selectئێستایە .form-select.
  • .custom-fileو .form-fileجێگەیان گرتۆتەوە بە ستایلە تایبەتمەندەکان لەسەرەوەی .form-control.
  • .custom-rangeئێستایە .form-range.
  • کەوتۆتە خوارەوە ڕەسەن .form-control-fileو .form-control-range.

• شکاندنکەوتە خوارەوە .input-group-appendو .input-group-prepend. ئێستا دەتوانیت تەنها دوگمە زیاد بکەیت و .input-group-textوەک منداڵی ڕاستەوخۆی گروپەکانی چوونەژوورەوە.

• تیژڕەوی سنووری ونبووی درێژخایەن لەسەر گروپی هاتنەژوورەوە لەگەڵ هەڵەی فیدباکەکانی چەسپاندن لە کۆتاییدا بە زیادکردنی .has-validationپۆلێکی زیادە بۆ گروپەکانی هاتنەژوورەوە لەگەڵ چەسپاندن چارەسەر دەکرێت.

• شکاندن پۆلەکانی نەخشەی تایبەت بە فۆڕم بۆ سیستەمی تۆڕەکەمان وەلا نا. تۆڕ و خزمەتگوزارییەکانمان بەکاربهێنە لەبری .form-group, .form-row, یان .form-inline.

• شکاندنئێستا لیبێڵەکانی فۆڕم پێویستیان بە .form-label.

• شکاندن .form-textno longer sets display, ڕێگەت پێدەدات دەقی یارمەتی لەناو هێڵ یان بلۆک بکەیت بەو شێوەیەی کە دەتەوێت تەنها بە گۆڕینی توخمەکەی HTML.

• ئایکۆنەکانی ڕەچاوکردن چیتر بۆ <select>s بە multiple.

• دووبارە ڕێکخستنەوەی فایلە سەرچاوەییەکانی Sass لە ژێر scss/forms/, لەوانەش شێوازەکانی گروپی چوونەژوورەوە.

---

پێکهاتەکان

• بەها یەکگرتووەکان paddingبۆ ئاگادارکردنەوەکان، نانە وردکراوەکان، کارتەکان، دابەزینەکان، گروپەکانی لیست، مۆداڵەکان، پۆپۆڤەرەکان، و ئامرازەکان بۆ ئەوەی لەسەر بنەمای $spacerگۆڕاوەکەمان بێت. سەیری #30564 بکە .

ئەکۆردیۆن

• پێکهاتەی نوێی ئەکۆردیۆن زیادکرا .

ئاگادارکردنەوەکان

• ئێستا ئاگادارکردنەوەکان نموونەیان هەیە بە ئایکۆن .

• ستایلە تایبەتمەندەکان بۆ <hr>s لە هەر ئاگادارکردنەوەیەکدا لابرا لەبەر ئەوەی پێشتر بەکاریدەهێنن currentColor.

نیشانەکان

• شکاندنهەموو .badge-*پۆلەکانی ڕەنگ بۆ سوودمەندییەکانی پاشبنەما وەلا ناوە (بۆ نموونە، .bg-primaryلەبری .badge-primary).

• شکاندن.badge-pillجێهێڵراوە —لەبری ئەوە .rounded-pillسوودمەندییەکە بەکاربهێنە.

• شکاندنلابردنی ستایلەکانی هۆڤەر و فۆکەس بۆ <a>و <button>توخمەکان.

• زیادکردنی پادکردنی پێشوەختە بۆ نیشانەکان لە .25em/ .5emبۆ .35em/ .65em.

نانە وردکراوەکان

• دەرکەوتنی پێشوەختەی نانە وردکراوەکان ئاسانتر کرد بە لابردنی padding, background-color, و border-radius.

• تایبەتمەندی تایبەتمەندی نوێی CSS زیادکرا --bs-breadcrumb-dividerبۆ خۆکارکردنی ئاسان بەبێ ئەوەی پێویستت بە دووبارە کۆکردنەوەی CSS هەبێت.

دوگمەکان

• شکاندن دوگمەکانی گۆڕین , لەگەڵ سندوقی هەڵبژاردن یان ڕادیۆ، چیتر پێویستیان بە جاڤاسکڕێپت نییە و نیشانەیەکی نوێیان هەیە. چیتر پێویستمان بە توخمێکی پێچان نییە، زیاد.btn-checkدەکەین بۆ<input>, و لەگەڵ هەر.btnپۆلێک لەسەر<label>. سەیری #30650 بکە . دۆکیومێنتەکانی ئەمە لە لاپەڕەی دوگمەکانمانەوە گواستراوەتەوە بۆ بەشی نوێی فۆڕمەکان.

• شکاندن .btn-blockبۆ خزمەتگوزارییەکان کەوتە خوارەوە . لەبری بەکارهێنانی .btn-blockلەسەر , دوگمەکانت بە و سوودمەندێک .btnبپێچە بۆ ئەوەی بەپێی پێویست شوێنیان بۆ دابنێیت. بگۆڕە بۆ پۆلە وەڵامدەرەوەکان بۆ ئەوەی کۆنترۆڵی زیاتریان بکەیت. بۆ هەندێک نموونە دۆکیومێنتەکان بخوێنەرەوە..d-grid.gap-*

• نوێکردنەوەی ئێمە button-variant()و button-outline-variant()میکسینەکان بۆ پشتگیریکردنی پارامێتەرەکانی زیادە.

• دوگمەکان نوێ کراوەتەوە بۆ دڵنیابوون لە زیادبوونی کۆنتراست لەسەر هۆڤەر و باری چالاک.

• دوگمە لەکارخراوەکان ئێستا pointer-events: none;.

کارت

• شکاندن.card-deckلە بەرژەوەندی تۆڕەکەماندا کەوتە خوارەوە . کارتەکانت لە پۆلەکانی ستوونەکاندا بپێچە و .row-cols-*کۆنتێنەرێکی باوک زیاد بکە بۆ دووبارە دروستکردنەوەی دەکەکانی کارتەکان (بەڵام بە کۆنترۆڵی زیاتر لەسەر ڕێکخستنی وەڵامدەرەوە).

• شکاندن.card-columnsلە بەرژەوەندی ماسۆنری کەوتە خوارەوە . سەیری #28922 بکە .

• شکاندنئەکۆردیۆنی .cardبنەڕەتی گۆڕی بە پێکهاتەیەکی نوێی ئەکۆردیۆن .

کارۆسێل

• .carousel-darkجۆرێکی نوێ زیادکرا بۆ دەقی تاریک و کۆنتڕۆڵەکان و نیشاندەرەکان (بۆ پاشبنەمای ڕووناکتر زۆر باشە).

• ئایکۆنەکانی شێڤرۆن بۆ کۆنتڕۆڵەکانی کارۆسێل گۆڕدرا بە SVG نوێ لە ئایکۆنەکانی Bootstrap .

دوگمەی داخستنی

• شکاندنناوی گۆڕدراوە .closeبۆ .btn-closeبۆ ناوێکی کەمتر گشتی.

• ئێستا دوگمەکانی داخستنی background-imageلەبری a لە HTML دا (SVG ی جێگیرکراو) بەکاردەهێنن ×، ئەمەش ڕێگە بە خۆکارکردنی ئاسانتر دەدات بەبێ ئەوەی پێویستت بە دەست لێدانی نیشانەکەت بێت.

• جۆرێکی نوێ زیادکرا .btn-close-whiteکە بەکاریدەهێنێت filter: invert(1)بۆ چالاککردنی ئایکۆنەکانی ڕەتکردنەوەی کۆنتراستی بەرزتر لە بەرامبەر پاشبنەمای تاریکتردا.

شکست هێنان

• لەنگەری سکڕۆڵ بۆ ئەکۆردیۆنەکان لابرا.

دابەزینەکان

• زیادکردنی .dropdown-menu-darkجۆرێکی نوێ و گۆڕاوە پەیوەندیدارەکان بۆ دابەزینی تاریک لەسەر داواکاری.

• گۆڕاوێکی نوێ زیادکرا بۆ $dropdown-padding-x.

• دابەشکەری دابەزینی تاریک کرد بۆ باشترکردنی کۆنتراست.

• شکاندنئێستا هەموو ڕووداوەکان بۆ دابەزینەکە لەسەر دوگمەی گۆڕینی دابەزینەکە دەستپێدەکرێن و پاشان بڵق دەکرێن تا توخمە باوکەکە.

• ئێستا مینیوەکانی دابەزین data-bs-popper="static"تایبەتمەندییەکیان داناوە کاتێک شوێنی دابەزینەکە ئیستاتیک بێت و data-bs-popper="none"کاتێک دابەزینەکە لە ناو بارەکەدا بێت. ئەمە لەلایەن جاڤاسکڕێپتەکەمانەوە زیادکراوە و یارمەتیدەرمانە بۆ بەکارهێنانی ستایلەکانی شوێنی تایبەت بەبێ ئەوەی دەستوەردان لە شوێنی Popper بکەین.

• شکاندنبژاردەی دابەزێندرا flipبۆ پێوەکراوەکانی دابەزین لە بەرژەوەندی ڕێکخستنی ڕەسەنی Popper. ئێستا دەتوانیت هەڵسوکەوتی flipping لەکاربخەیت بە تێپەڕاندنی ڕیزبەندییەکی بەتاڵ بۆ fallbackPlacementsهەڵبژاردن لە گۆڕینی flipping .

• ئێستا دەتوانرێت مینیوەکانی دابەزین بە autoCloseبژاردەیەکی نوێ کلیکیان لەسەر بکرێت بۆ مامەڵەکردن لەگەڵ هەڵسوکەوتی داخستنی ئۆتۆماتیکی . دەتوانیت ئەم هەڵبژاردنە بەکاربهێنیت بۆ قبوڵکردنی کلیکەکە لە ناوەوە یان دەرەوەی مینیوی دابەزین بۆ ئەوەی کارلێککەر بێت.

• ئێستا درۆپداونەکان پشتگیری لە s دەکەن .dropdown-itemکە لە s پێچراون <li>.

جامبۆترۆن

• شکاندنپێکهاتەی جامبۆترۆنی کەوتە خوارەوە چونکە دەتوانرێت لەگەڵ سوودمەندیەکان دووبارە بکرێتەوە. بۆ دیمۆیەک سەیری نموونەی نوێی جامبۆترۆنمان بکە.

گروپی لیست

• .list-group-numberedدەستکاریکەری نوێ زیادکرا بۆ گروپەکانی لیست.

ناوەکان و تابەکان

• nullگۆڕاوە نوێیەکان بۆ font-size, font-weight, color, و زیادکرا :hover colorبۆ .nav-linkپۆلەکە.

ناوبارس

• شکاندنئێستا ناوبارەکان پێویستیان بە کۆنتێنەرێک هەیە لە ناوەوە (بۆ ئاسانکردنی توندی پێداویستییەکانی دووری و CSS کە پێویستە).

ئۆفکانڤاس

• پێکهاتەی نوێی ئۆفکانڤاس زیادکرا .

لاپەڕەسازی

• ئێستا بەستەرەکانی لاپەڕەسازی تایبەتمەندییان هەیە margin-leftکە بە شێوەیەکی داینامیکی لەسەر هەموو گۆشەکان دەگۆڕدرێن کاتێک لە یەکتر جیا دەکرێنەوە.

• زیادکردنی transitions بۆ بەستەرەکانی لاپەڕەسازی.

پۆپۆڤەرز

• شکاندنناوی گۆڕدراوە .arrowبۆ .popover-arrowلە قاڵبی popover پێشوەختەمان.

• whiteListبژاردەی ناوی گۆڕاوە بۆ allowList.

سپینەرەکان

• ئێستا سپینەرەکان prefers-reduced-motion: reduceبە خاوکردنەوەی ئەنیمەیشنەکان ڕێز دەگرن. سەیری #31882 بکە .

• باشترکردنی ڕێکخستنی ڕاست و چەپی سپینەر.

نانی بەیانی

• ئێستا دەتوانرێت تۆستەکان لە شوێنێکدا.toast-container دابنرێت بە یارمەتی شوێنپێهەڵگرتنی خزمەتگوزارییەکان .

• ماوەی پێشوەختەی تۆست گۆڕدرا بۆ 5 چرکە.

• لە نانی برژاوەکان دەرهێنراوە و بە s ی overflow: hiddenدروست دەگۆڕدرێت لەگەڵ فەنکشنەکان.border-radiuscalc()

ئامۆژگاری ئامرازەکان

• شکاندنناوی گۆڕدراوە .arrowبۆ .tooltip-arrowلە قاڵبی ئامۆژگاری پێشوەختەمان.

• شکاندنبەهای پێشوەختە بۆ fallbackPlacementsگۆڕدراوە بۆ ['top', 'right', 'bottom', 'left']بۆ باشتر دانانی توخمەکانی پۆپەر.

• شکاندنwhiteListبژاردەی ناوی گۆڕاوە بۆ allowList.

خزمەتگوزارییەکان

• شکاندنناوی چەندین سوودمەندی گۆڕی بۆ بەکارهێنانی ناوی تایبەتمەندی لۆژیکی لەبری ناوی ئاراستەیی لەگەڵ زیادکردنی پشتگیری RTL:

  • ناوی گۆڕاوە .left-*و .right-*بۆ .start-*و .end-*.
  • ناوی گۆڕاوە .float-leftو .float-rightبۆ .float-startو .float-end.
  • ناوی گۆڕاوە .border-leftو .border-rightبۆ .border-startو .border-end.
  • ناوی گۆڕاوە .rounded-leftو .rounded-rightبۆ .rounded-startو .rounded-end.
  • ناوی گۆڕاوە .ml-*و .mr-*بۆ .ms-*و .me-*.
  • ناوی گۆڕاوە .pl-*و .pr-*بۆ .ps-*و .pe-*.
  • ناوی گۆڕاوە .text-leftو .text-rightبۆ .text-startو .text-end.

• شکاندنبە شێوازی پێشوەختە پەراوێزی نەرێنی لەکارخراوە.

• پۆلێکی نوێ زیادکرا .bg-bodyبۆ ڕێکخستنی خێرای <body>پاشبنەمای 's بۆ توخمە زیادەکان.

• زیادکردنی سوودمەندی پۆستی نوێ بۆ top, right, bottom, و left. بەهاکان بریتین لە 0, 50%, و 100%بۆ هەر تایبەتمەندییەک.

• زیادکردنی نوێ .translate-middle-x& .translate-middle-yسوودمەندیەکان بۆ ئاسۆیی یان ڕاست ناوەندی توخمە ڕەها/جێگیرەکان.

• زیادکردنی border-widthخزمەتگوزارییە نوێیەکان .

• شکاندنناوی گۆڕدراوە .text-monospaceبۆ .font-monospace.

• شکاندنلابرا .text-hideبەو پێیەی شێوازێکی کۆنە بۆ شاردنەوەی دەق کە نابێت چیتر بەکاربهێنرێت.

• زیادکردنی .fs-*سوودمەندیەکان بۆ font-sizeسوودمەندیەکان (بە چالاککردنی RFS). ئەمانە هەمان پێوەر بەکاردەهێنن وەک سەردێڕە پێشوەختەکانی HTML (1-6، گەورە بۆ بچووک)، و دەتوانرێت لە ڕێگەی نەخشەی Sass دەستکاری بکرێت.

• شکاندن.font-weight-*ناوی سوودمەندەکان گۆڕدراوە وەک .fw-*بۆ کورتی و یەکگرتوویی.

• شکاندن.font-style-*ناوی سوودمەندەکان گۆڕدراوە وەک .fst-*بۆ کورتی و یەکگرتوویی.

• زیادکراوە .d-gridبۆ پیشاندانی سوودمەندیەکان و سوودمەندییە نوێیەکان gap( .gap) بۆ نەخشەکانی CSS Grid و flexbox.

• شکاندنلابرد .rounded-smو rounded-lg, و پێوەرێکی نوێی پۆلەکانی ناساند، .rounded-0بۆ .rounded-3. سەیری #31687 بکە .

• سوودمەندییە نوێیەکان زیادکرا line-height: .lh-1, .lh-sm, .lh-baseو .lh-lg. لێرە ببینە .

• سوودمەندییەکەمان لە CSS ـەکەماندا .d-noneگواستەوە بۆ ئەوەی قورسایی زیاتری پێ بدرێت بە بەراورد بە سوودمەندییەکانی تری پیشاندانی.

• .visually-hidden-focusableیارمەتیدەرەکە درێژکردەوە بۆ ئەوەی هەروەها کار لەسەر دەفرەکان بکات، بە بەکارهێنانی :focus-within.

یارمەتیدەران

• شکاندن یارمەتیدەرانی جێگیرکردنی وەڵامدەرەوە ناویان گۆڕدراوە بۆ یارمەتیدەرانی ڕێژەیی بە ناوی پۆلی نوێ و هەڵسوکەوتی باشتر، هەروەها گۆڕاوێکی یارمەتیدەری CSS.

  • ناوی پۆلەکان گۆڕدراون بۆ ئەوەی بگۆڕدرێن byبۆ xلە ڕێژەی ڕووبەر. بۆ نموونە، .ratio-16by9ئێستا .ratio-16x9.
  • ئێمە .embed-responsive-itemهەڵبژێرەری گروپی و توخمەکانمان وەلا ناوە لە بەرژەوەندی .ratio > *هەڵبژێرەرێکی سادەتر. پێویست بە پۆلێکی زیاتر ناکات، و یارمەتیدەری ڕێژەی ئێستا لەگەڵ هەر توخمێکی HTML کاردەکات.
  • نەخشەی $embed-responsive-aspect-ratiosساس ناوی گۆڕاوە بۆ $aspect-ratiosو بەهاکانی ئاسان کراون بۆ ئەوەی ناوی پۆلەکە و ڕێژەی سەدی وەک key: valueجووتەکە جێگیر بکرێت.
  • ئێستا گۆڕاوەکانی CSS دروست دەکرێن و بۆ هەر بەهایەک لە نەخشەی Sass دا جێگیر دەکرێن. دەستکاری --bs-aspect-ratioگۆڕاوەکە بکە لەسەر .ratioبۆ دروستکردنی هەر ڕێژەیەکی ڕووکاری تایبەتمەند .

• شکاندن پۆلەکانی "خوێنەری شاشە" ئێستا پۆلی "بینراو شاراوەن" .

  • فایلە ساسەکەی لە scss/helpers/_screenreaders.scssبۆ گۆڕیscss/helpers/_visually-hidden.scss
  • ناوی گۆڕاوە .sr-onlyو .sr-only-focusableبۆ .visually-hiddenو.visually-hidden-focusable
  • ناوی گۆڕاوە sr-only()و sr-only-focusable()میکسین بۆ visually-hidden()و visually-hidden-focusable().

• bootstrap-utilities.cssئێستا یارمەتیدەرەکانمانیش دەگرێتەوە. ئیتر پێویست ناکات یارمەتیدەرەکان لە دروستکردنی تایبەتدا هاوردە بکرێن.

جاڤاسکڕێپت

• وابەستەیی jQuery وەلا هێنا و پێوەکراوەکانی نووسیەوە بۆ ئەوەی لە جاڤاسکڕێپتی ئاساییدا بن.

• شکاندنتایبەتمەندیەکانی داتا بۆ هەموو پێوەکراوەکانی جاڤاسکڕێپت ئێستا ناویان بۆ دانراوە بۆ یارمەتیدان لە جیاکردنەوەی کارایی Bootstrap لە لایەنی سێیەم و کۆدی خۆت. بۆ نموونە data-bs-toggleلەبری data-toggle.

• ئێستا هەموو پێوەکراوەکان دەتوانن هەڵبژێرەری CSS وەک یەکەم ئارگومێنت وەربگرن. دەتوانیت یان توخمێکی DOM یان هەر هەڵبژێرەرێکی CSSی دروست تێپەڕێنیت بۆ دروستکردنی نموونەیەکی نوێی پێوەکراوەکە:

  کۆپی بکە

  var modal = new bootstrap.Modal('#myModal')
  var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigدەتوانرێت وەک فەنکشنێک تێپەڕێنرێت کە ڕێکخستنی پێشوەختەی Popper ی Bootstrap وەک ئارگومێنتێک قبوڵ دەکات، بۆ ئەوەی بتوانیت ئەم ڕێکخستنە پێشوەختە بە شێوازی خۆت تێکەڵ بکەیت. بۆ درۆپداونەکان، پۆپۆڤەرەکان و ئامرازەکان دەگونجێت.

• بەهای پێشوەختە بۆ fallbackPlacementsگۆڕدراوە بۆ ['top', 'right', 'bottom', 'left']بۆ باشتر دانانی توخمەکانی Popper. بۆ درۆپداونەکان، پۆپۆڤەرەکان و ئامرازەکان دەگونجێت.

• هێڵی ژێرەوە لە شێوازە ئیستاتیکییە گشتیەکانی وەک _getInstance()→ لابرا getInstance().