کۆچکردن بۆ 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
, یان about24px
, down from30px
). ئەمەش کانیەکانی سیستەمی تۆڕەکەمان لەگەڵ خزمەتگوزارییەکانی دوورکەوتنەوەمان ڕێکدەخات.- پۆلی نوێی کانیاوەکان زیادکرا (
.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-left
on<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-text
no longer setsdisplay
, ڕێگەت پێدەدات دەقی یارمەتی لەناو هێڵ یان بلۆک بکەیت بەو شێوەیەی کە دەتەوێت تەنها بە گۆڕینی توخمەکەی 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. ئێستا دەتوانیت هەڵسوکەوتی وەرگەڕان لەکاربخەیت بە تێپەڕاندنی ڕیزبەندییەکی بەتاڵ بۆfallbackPlacements
بژاردە لە گۆڕینی گۆڕینی. -
ئێستا دەتوانرێت مینیوەکانی دابەزین بە
autoClose
بژاردەیەکی نوێ کلیکیان لەسەر بکرێت بۆ مامەڵەکردن لەگەڵ هەڵسوکەوتی داخستنی ئۆتۆماتیکی . دەتوانیت ئەم هەڵبژاردنە بەکاربهێنیت بۆ قبوڵکردنی کلیکەکە لە ناوەوە یان دەرەوەی مینیوی دابەزین بۆ ئەوەی کارلێککەر بێت. -
ئێستا درۆپداونەکان پشتگیری لە s دەکەن
.dropdown-item
کە لە s پێچراون<li>
.
جامبۆترۆن
- شکاندنپێکهاتەی جامبۆترۆنی کەوتە خوارەوە چونکە دەتوانرێت لەگەڵ سوودمەندیەکان دووبارە بکرێتەوە. بۆ دیمۆیەک سەیری نموونەی نوێی جامبۆترۆنمان بکە.
گروپی لیست
.list-group-numbered
دەستکاریکەری نوێ زیادکرا بۆ گروپەکانی لیست.
ناوەکان و تابەکان
null
گۆڕاوە نوێیەکان بۆfont-size
,font-weight
,color
, و زیادکرا:hover
color
بۆ.nav-link
پۆلەکە.
ناوبارس
- شکاندنئێستا ناوبارەکان پێویستیان بە کۆنتێنەرێک هەیە لە ناوەوە (بۆ ئاسانکردنی توندی پێداویستییەکانی دووری و CSS کە پێویستە).
ئۆفکانڤاس
- پێکهاتەی نوێی ئۆفکانڤاس زیادکرا .
لاپەڕەسازی
-
ئێستا بەستەرەکانی لاپەڕەسازی تایبەتمەندییان هەیە
margin-left
کە بە شێوەیەکی داینامیکی لەسەر هەموو گۆشەکان دەگۆڕدرێن کاتێک لە یەکتر جیا دەکرێنەوە. -
زیادکردنی
transition
s بۆ بەستەرەکانی لاپەڕەسازی.
پۆپۆڤەرز
-
شکاندنناوی گۆڕدراوە
.arrow
بۆ.popover-arrow
لە قاڵبی popover پێشوەختەمان. -
whiteList
بژاردەی ناوی گۆڕاوە بۆallowList
.
سپینەرەکان
-
ئێستا سپینەرەکان
prefers-reduced-motion: reduce
بە خاوکردنەوەی ئەنیمەیشنەکان ڕێز دەگرن. سەیری #31882 بکە . -
باشترکردنی ڕێکخستنی ڕاست و چەپی سپینەر.
نانی بەیانی
-
ئێستا دەتوانرێت تۆستەکان لە شوێنێکدا
.toast-container
دابنرێت بە یارمەتی شوێنپێهەڵگرتنی خزمەتگوزارییەکان . -
ماوەی پێشوەختەی تۆست گۆڕدرا بۆ 5 چرکە.
-
لە نانی برژاوەکان دەرهێنراوە و بە s ی
overflow: hidden
دروست دەگۆڕدرێت لەگەڵ فەنکشنەکان.border-radius
calc()
ئامۆژگاری ئامرازەکان
-
شکاندنناوی گۆڕدراوە
.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()
.