باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

کۆچکردن بۆ v5

شوێنپێهەڵگرتن و پێداچوونەوە بە گۆڕانکارییەکان لە فایلە سەرچاوەییەکانی Bootstrap، بەڵگەنامەکان و پێکهاتەکانی بکە بۆ ئەوەی یارمەتیت بدات لە گواستنەوە لە v4 بۆ v5.

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

  • 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 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 بکە

  • شکاندن <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-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 ی جێگیرکراو) بەکاردەهێنن &times;، ئەمەش ڕێگە بە خۆکارکردنی ئاسانتر دەدات بەبێ ئەوەی پێویستت بە دەست لێدانی نیشانەکەت بێت.

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

شکست هێنان

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

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

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

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

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

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

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

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

جامبۆترۆن

گروپی لیست

  • 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().