کۆچکردن بۆ v5

v5.2.0

دیزاینێکی نوێکراوە

Bootstrap v5.2.0 تایبەتمەندی نوێکردنەوەی دیزاینێکی وردی هەیە بۆ مشتێک پێکهاتە و تایبەتمەندی لە سەرانسەری پڕۆژەکەدا، دیارترینیان لە ڕێگەی border-radiusبەها پاڵاوتەکان لەسەر دوگمەکان و کۆنتڕۆڵەکانی فۆرم . هەروەها بەڵگەنامەکانمان بە ماڵپەڕێکی سەرەکی نوێ نوێکراونەتەوە، نەخشەی دۆکیومێنتەکانی سادەتر کە چیتر بەشەکانی لایەنی پەنجەرەکە ناڕووخێنێت، و نموونەی دیارتر لە ئایکۆنەکانی بووتستراپ .

گۆڕاوەی زیاتری CSS

ئێمە هەموو پێکهاتەکانمان نوێ کردووەتەوە بۆ بەکارهێنانی گۆڕاوەکانی CSS. لە کاتێکدا کە Sass هێشتا بنەمای هەموو شتێکە، هەر پێکهاتەیەک نوێکراوەتەوە بۆ ئەوەی گۆڕاوەکانی CSS لەسەر پۆلەکانی بنەمای پێکهاتەکان بگرێتەوە (بۆ نموونە، .btn)، ڕێگە بە خۆکارکردنی زیاتری کاتی ڕاستەقینەی Bootstrap دەدات. لە بڵاوکراوەکانی دواتردا، ئێمە بەردەوام دەبین لە فراوانکردنی بەکارهێنانی گۆڕاوەکانی CSS بۆ نەخشە، فۆڕم، یارمەتیدەران و سوودمەندییەکانمان. زیاتر بخوێنەرەوە دەربارەی گۆڕاوەکانی CSS لە هەر پێکهاتەیەک لە لاپەڕەکانی بەڵگەنامەسازی خۆیان.

بەکارهێنانی گۆڕاوەی CSS ی ئێمە تا ڕادەیەک ناتەواو دەبێت تا Bootstrap 6. لە کاتێکدا ئێمە زۆرمان پێ خۆشە ئەمانە بە تەواوی جێبەجێ بکەین لە سەرانسەری بۆردەکەدا، بەڵام مەترسی ئەوەیان لەسەرە کە ببنە هۆی گۆڕانکاری شکاندن. بۆ نموونە ڕێکخستن $alert-border-width: var(--bs-border-width)لە کۆدی سەرچاوەی ئێمەدا Sass ی پۆتانسێل لە کۆدی خۆتدا دەشکێنێت ئەگەر بە $alert-border-width * 2هۆکارێک کارت دەکرد.

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

نوێ_maps.scss

Bootstrap v5.2.0 فایلێکی نوێی Sass ی بە _maps.scss. چەندین نەخشەی ساس لە دەرەوە دەکێشێت _variables.scssبۆ چارەسەرکردنی کێشەیەک کە نوێکردنەوە بۆ نەخشەیەکی ئەسڵی بۆ نەخشە لاوەکییەکان جێبەجێ نەکرابوو کە درێژیان دەکەنەوە. بۆ نموونە، نوێکارییەکان بۆ $theme-colorsنەخشەکانی تری بابەتەکان جێبەجێ نەدەکرا کە پشتیان بە $theme-colors, شکاندنی کاری خۆکارکردنی کلیلەکان. بە کورتی، Sass سنوورێکی هەیە کە کاتێک گۆڕاوێک یان نەخشەیەکی پێشوەختە بەکارهاتووە ، ناتوانرێت نوێ بکرێتەوە. کەموکووڕییەکی هاوشێوە لەگەڵ گۆڕاوەکانی CSS هەیە کاتێک بەکاردەهێنرێن بۆ پێکهێنانی گۆڕاوەکانی تری CSS.

هەر لەبەر ئەمەشە کە خۆکارکردنی گۆڕاو لە Bootstrap دەبێت دوای @import "functions", بەڵام پێش @import "variables"و باقی ستاکەکەی هاوردەکردنمان بێت. هەمان شت بۆ نەخشەکانی ساس دەگونجێت- پێویستە پێشوەختە پێشوەختە بەکاربهێنیت پێش ئەوەی بەکاریان بهێنیت. ئەم نەخشانەی خوارەوە گواستراونەتەوە بۆ نوێ _maps.scss:

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

ئێستا دەبێت دروستکردنە تایبەتەکانی Bootstrap CSS ی تۆ شتێکی لەم شێوەیە دەرکەوێت بە هاوردەکردنی نەخشەی جیاواز.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

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

• font-weightسوودمەندییە فراوانکراوەکان بۆ ئەوەی .fw-semiboldبۆ فۆنتەکانی نیمچە قەڵەم لەخۆ بگرن.
• border-radiusسوودمەندییە فراوانکراوەکان بۆ ئەوەی دوو قەبارەی نوێ لەخۆ بگرێت، .rounded-4و .rounded-5, بۆ بژاردەی زیاتر.

گۆڕانکاری زیادە

• $enable-container-classesبژاردەی نوێی ناسێندرا . — ئێستا کاتێک هەڵدەبژێریت بۆ ناو نەخشەی تۆڕی CSS تاقیکاری، .container-*پۆلەکان هەر کۆدەکرێنەوە، مەگەر ئەم هەڵبژاردنە لەسەر false. هەروەها ئێستا دەفرەکان بەهاکانی کانیاوەکانیان دەهێڵنەوە.

• ئێستا پێکهاتەی ئۆفکانڤاس گۆڕانکاری وەڵامدەرەوەی هەیە . پۆلی ڕەسەن .offcanvasوەک خۆی دەمێنێتەوە- ناوەڕۆک لە سەرانسەری هەموو دەرگاکانی بینین دەشارێتەوە. بۆ ئەوەی وەڵامدەرەوە بێت، ئەو .offcanvasپۆلە بگۆڕە بۆ هەر .offcanvas-{sm|md|lg|xl|xxl}پۆلێک.

• ئێستا دابەشکەری مێزەکانی ئەستوورتر بەشداری دەکەن. — ئێمە سنووری ئەستوورتر و قورسترمان لابردووە کە لە نێوان گروپەکانی خشتەکاندا جێبەجێ بکرێت و گواستمانەوە بۆ پۆلێکی هەڵبژاردە کە دەتوانیت بەکاری بهێنیت، .table-group-divider. بۆ نموونە سەیری دۆکیومێنتەکانی خشتەکە بکە.

• Scrollspy نووسراوەتەوە بۆ بەکارهێنانی Intersection Observer API , کە واتە چیتر پێویستت بە پێچەرەی دایک و باوکی ڕێژەیی نییە،offsetڕێکخستنەکان ڕەتدەکاتەوە و زۆر شتی تر. بەدوای جێبەجێکردنەکانی Scrollspy ی خۆتدا بگەڕێ بۆ ئەوەی وردتر و یەکگرتووتر بن لە تیشک خستنە ناوەوەی nav یاندا.

• ئێستا Popovers و Tooltips گۆڕاوەکانی CSS بەکاردەهێنن. هەندێک لە گۆڕاوەکانی CSS لە هاوتاکانیان لە Sass نوێکراونەتەوە بۆ کەمکردنەوەی ژمارەی گۆڕاوەکان. لە ئەنجامدا، سێ گۆڕاو لەم بڵاوکراوەدا بەکارنەهێنراون: $popover-arrow-color, $popover-arrow-outer-color, و $tooltip-arrow-color.

• .text-bg-{color}یارمەتیدەری نوێ زیادکرا . لەبری ئەوەی تاک .text-*و .bg-*سوودمەندیەکان دابنێیت، ئێستا دەتوانیت یارمەتیدەرەکان بەکاربهێنیت بۆ.text-bg-* ڕێکخستنی background-colorپێشەوەی کۆنتراست color.

• دەستکاریکەر زیادکرا .form-check-reverseبۆ گۆڕینی ڕێزبەندی ناوەکان و سندوقەکانی هەڵبژاردن/ڕادیۆکانی پەیوەندیدار.

• زیادکردنی ستوونی ڕەنگاوڕەنگ پشتگیری بۆ خشتەکان دەکات لە ڕێگەی .table-striped-columnsپۆلی نوێ.

بۆ لیستی تەواوی گۆڕانکارییەکان، سەیری پڕۆژەی v5.2.0 بکە لە GitHub .

v5.1.0

• پشتگیری تاقیکاری زیادکرا بۆ نەخشەی تۆڕی CSS . — ئەمە کارێکە لە قۆناغی پێشکەوتندایە، و هێشتا ئامادە نییە بۆ بەکارهێنانی بەرهەمهێنان، بەڵام دەتوانیت لە ڕێگەی ساسەوە هەڵبژێریت بۆ ناو تایبەتمەندییە نوێیەکە. بۆ چالاککردنی، تۆڕی پێشوەختە لەکاربخە، بە ڕێکخستن $enable-grid-classes: falseو تۆڕی CSS چالاک بکە بە ڕێکخستن $enable-cssgrid: true.

• نوێکردنەوەی navbars بۆ پشتگیریکردنی offcanvas. — زیادکردنی کۆشکەکانی دەرەوەی کانڤاس لە هەر ناوبارێکدا لەگەڵ .navbar-expand-*پۆلەکانی وەڵامدەرەوە و هەندێک نیشانەکردنی دەرەوەی کانڤاس.

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

• ئێستا پێوەکراوەکەی داڕمان پشتگیری لە داڕمانی ئاسۆیی دەکات . — زیاد بکە .collapse-horizontalبۆ خۆت .collapseبۆ داڕمانی لە widthجیاتی height. دوور بکەوەرەوە لە دووبارە بۆیاخکردنەوەی وێبگەڕ بە ڕێکخستنی a min-heightیان height.

• یارمەتیدەری نوێی ستاک و یاسای ڕاست زیادکرا. — بە خێرایی چەندین تایبەتمەندی فلێکسبۆکس بەکاربهێنە بۆ دروستکردنی بە خێرایی نەخشەی تایبەت بە ستاکەکان . لە نێوان ستاکەکانی ئاسۆیی ( .hstack) و ڕاست ( ) هەڵبژێرە. بە یارمەتیدەرە نوێیەکان.vstack دابەشکەری ڕاست هاوشێوەی <hr>توخمەکان زیاد بکە ..vr

• گۆڕاوە جیهانییە نوێیەکانی :rootCSS زیادکرا. — چەند گۆڕاوێکی نوێی CSS زیادکرا بۆ :rootئاستەکە بۆ کۆنترۆڵکردنی <body>ستایلەکان. زیاتر لە کارەکاندان، لەوانەش لە سەرانسەری سوودمەندی و پێکهاتەکانمان، بەڵام بۆ ئێستا گۆڕاوەکانی CSS لە بەشی Customize بخوێنەرەوە .

• سوودمەندییەکانی ڕەنگ و پاشبنەمای چاککرایەوە بۆ بەکارهێنانی گۆڕاوەکانی CSS، و سوودمەندییەکانی ناڕوونی دەق و ناڕوونی پاشبنەمای نوێ زیادکرا . — .text-* و .bg-*ئێستا سوودمەندیەکان بە گۆڕاوەکانی CSS و rgba()بەهاکانی ڕەنگ دروستکراون، ڕێگەت پێدەدات بە ئاسانی هەر سوودمەندیەک بە سوودمەندییە نوێیەکانی ناڕوون خۆکارانە دابنێیت.

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

• شێوازەکانی جێگیرکردنی بەکارنەهێنراو لە popovers و tooltips لابرا چونکە ئەمانە تەنها لەلایەن Popper مامەڵەیان لەگەڵ دەکرێت. $tooltip-marginبەکارنەهێنراوە و nullلە پرۆسەکەدا دانراوە.

زانیاری زیاترت دەوێت؟ پۆستی بلۆگی v5.1.0 بخوێنەرەوە.

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

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

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

• ئینتەرنێت ئێکسپلۆرەری ١٠ و ١١ی وەلا هێنا
• مایکرۆسۆفت ئێدج < 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 نییە. سەیری #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 بکە

• شکاندن <hr>ئێستا توخمەکان heightلەبری borderئەوەی باشتر پشتگیری لە sizeتایبەتمەندییەکە بکەن بەکاریدەهێنن. هەروەها ئەمە بەکارهێنانی سوودمەندییەکانی پادکردن بۆ دروستکردنی دابەشکەری ئەستوورتر (بۆ نموونە، <hr class="py-1">).

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

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

RTL

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

فۆڕمەکان

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

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

  • .custom-control.custom-checkboxئێستایە .form-check.
  • .custom-control.custom-custom-radioئێستایە .form-check.
  • .custom-control.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.

• کۆنتڕۆڵەکانی فۆڕم چیتر بەکارناهێنرێن جێگیر heightکاتێک دەتوانرێت، لەبری ئەوە دوادەخرێت min-heightبۆ باشترکردنی خۆکارکردن و گونجان لەگەڵ پێکهاتەکانی تر.

• ئایکۆنەکانی ڕەچاوکردن چیتر بۆ <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"تایبەتمەندییەکیان داناوە کاتێک شوێنی دابەزینەکە ئیستاتیک بێت، یان دابەزینەکە لە ناو بارەکەدا بێت. ئەمە لەلایەن جاڤاسکڕێپتەکەمانەوە زیادکراوە و یارمەتیدەرمانە بۆ بەکارهێنانی ستایلەکانی شوێنی تایبەت بەبێ ئەوەی دەستوەردان لە شوێنی Popper بکەین.

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

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

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

جامبۆترۆن

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

گروپی لیست

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

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

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

ناوبارس

• شکاندنئێستا ناوبارەکان پێویستیان بە کۆنتێنەرێک هەیە لە ناوەوە (بۆ ئاسانکردنی توندی پێداویستییەکانی دووری و CSS کە پێویستە).
• شکاندن.activeچیتر ناتوانرێت پۆلەکە بۆ s بەکاربهێنرێت ، .nav-itemدەبێت ڕاستەوخۆ لەسەر .nav-links جێبەجێ بکرێت.

ئۆفکانڤاس

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

لاپەڕەسازی

• ئێستا بەستەرەکانی لاپەڕەسازی تایبەتمەندییان هەیە 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ی دروست تێپەڕێنیت بۆ دروستکردنی نموونەیەکی نوێی پێوەکراوەکە:

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

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

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

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