مهاجرت به نسخه 5
تغییرات فایلهای منبع بوت استرپ، اسناد و مؤلفهها را ردیابی و بررسی کنید تا به شما در مهاجرت از نسخه 4 به نسخه 5 کمک کند.
وابستگی ها
- jQuery حذف شد.
- از Popper v1.x به Popper v2.x ارتقا یافت.
- Libsas را با Dart Sass جایگزین کرد زیرا کامپایلر Sass ما با توجه به Libsas منسوخ شد.
- برای ساخت اسناد ما از جکیل به هوگو مهاجرت کردیم
پشتیبانی از مرورگر
- اینترنت اکسپلورر 10 و 11 حذف شد
- حذف Microsoft Edge < 16 (Legacy Edge)
- فایرفاکس کمتر از 60 حذف شد
- Safari حذف شده < 12
- حذف iOS Safari < 12
- Chrome <60 حذف شد
اسناد تغییر می کند
- طراحی مجدد صفحه اصلی، طرح اسناد، و پاورقی.
- راهنمای بسته جدید اضافه شد.
- بخش سفارشیسازی جدید اضافه شد، جایگزین صفحه Theming v4 ، با جزئیات جدید در مورد Sass، گزینههای پیکربندی جهانی، طرحهای رنگی، متغیرهای CSS و موارد دیگر.
- تمام اسناد فرم را در بخش فرمهای جدید سازماندهی کرد و محتوا را به صفحات متمرکزتر تقسیم کرد.
- به طور مشابه، بخش Layout را به روز کرد تا محتوای شبکه را با وضوح بیشتری بیان کند.
- صفحه مؤلفه «Navs» به «Navs & Tabs» تغییر نام داد.
- صفحه «چکها» به «چکها و رادیوها» تغییر نام داد.
- نوار ناوبری را دوباره طراحی کرد و یک زیرناو جدید اضافه کرد تا دسترسی به سایتها و نسخههای اسناد ما را آسانتر کند.
- میانبر صفحه کلید جدید برای قسمت جستجو اضافه شد: Ctrl + /.
ساس
-
ما ادغام های پیش فرض Sass map را حذف کرده ایم تا حذف مقادیر اضافی آسان تر شود. به خ��طر داشته باشید که اکنون باید تمام مقادیر را در نقشه های Sass تعریف کنید
$theme-colors
. نحوه برخورد با نقشه های Sass را بررسی کنید . -
شکستن
color-yiq()
تابع و متغیرهای مرتبط به آن تغییر نام دادcolor-contrast()
زیرا دیگر به فضای رنگی YIQ مربوط نمی شود. شماره 30168 را ببینید.$yiq-contrasted-threshold
به$min-contrast-ratio
.$yiq-text-dark
و$yiq-text-light
به ترتیب به$color-contrast-dark
و تغییر نام داده می$color-contrast-light
شوند.
-
شکستنپارامترهای mixins پرس و جو رسانه برای یک رویکرد منطقی تر تغییر کرده اند.
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
mixins اکنونnull
مقادیر را مجاز می کند وnone
از چندین آرگومان حذف می کند. به #30394 مراجعه کنید . -
border-radius()
mixin اکنون یک مقدار پیش فرض دارد .
سیستم رنگ
-
سیستم رنگی که با سیستم رنگی جدید کار کرد
color-level()
و$theme-color-interval
حذف شد. همهlighten()
و توابع در پایگاه کد ما با وdarken()
جایگزین می شوند . این توابع به جای اینکه روشنایی آن را با مقدار ثابتی تغییر دهند، رنگ را با سفید یا سیاه مخلوط می کنند. بسته به اینکه پارامتر وزن آن مثبت یا منفی باشد، رنگ را رنگ می کند یا سایه می اندازد. برای جزئیات بیشتر به #30622 مراجعه کنید.tint-color()
shade-color()
shift-color()
-
رنگها و سایههای جدید برای هر رنگ اضافه شده است، و نه رنگ جداگانه برای هر رنگ پایه، به عنوان متغیرهای جدید Sass ارائه میشود.
-
کنتراست رنگ بهبود یافته است. نسبت کنتراست رنگ از 3:1 به 4.5:1 افزایش یافته و رنگهای آبی، سبز، فیروزهای و صورتی به روز شده تا از کنتراست WCAG 2.1 AA اطمینان حاصل شود. همچنین رنگ کنتراست رنگ ما را از
$gray-900
به تغییر داد$black
. -
tint-color()
برای پشتیبانی از سیستم رنگی خود، سفارشی وshade-color()
توابع جدیدی را اضافه کردهایم تا رنگهای خود را به درستی ترکیب کنیم.
به روز رسانی شبکه
-
نقطه شکست جدید!
xxl
نقطه شکست جدید برای1400px
و بالا اضافه شد. هیچ تغییری در تمام نقاط شکست دیگر وجود ندارد. -
ناودان های بهبود یافته ناودانها اکنون به صورت rems تنظیم شدهاند و از v4 باریکتر هستند (
1.5rem
، یا در حدود24px
، از پایین30px
). این ناودان های سیستم شبکه ما را با ابزارهای فاصله گذاری ما هماهنگ می کند.- کلاس ناودانی جدید (
.g-*
,.gx-*
و.gy-*
) برای کنترل ناودان های افقی/عمودی، ناودان های افقی و ناودان های عمودی اضافه شده است. - شکستنتغییر نام
.no-gutters
برای.g-0
مطابقت با ابزارهای ناودانی جدید.
- کلاس ناودانی جدید (
-
ستونها دیگر
position: relative
اعمال نمیشوند، بنابراین ممکن است مجبور شوید.position-relative
برخی از عناصر را برای بازیابی آن رفتار اضافه کنید. -
شکستنچندین
.order-*
کلاس را که اغلب بدون استفاده می ماندند حذف کرد. ما در حال حاضر فقط.order-1
به.order-5
خارج از جعبه ارائه می دهیم. -
شکستنکامپوننت
.media
را حذف کرد زیرا می توان آن را به راحتی با برنامه های کاربردی تکرار کرد. برای مثال به #28265 و صفحه flex utilities مراجعه کنید. -
شکستن
bootstrap-grid.css
اکنونbox-sizing: border-box
به جای تنظیم مجدد اندازه کلی جعبه، فقط برای ستون اعمال می شود. به این ترتیب، سبک های شبکه ما می توانند در مکان های بیشتری بدون تداخل استفاده شوند. -
$enable-grid-classes
دیگر تولید کلاس های کانتینر را غیرفعال نمی کند. شماره 29146 را ببینید. -
make-col
mixin را بهصورت پیشفرض به ستونهای مساوی بدون اندازه مشخص بهروزرسانی کرد .
محتوا، راه اندازی مجدد و غیره
-
اکنون RFS به طور پیش فرض فعال است. عناوین با استفاده از
font-size()
میکسین به طور خودکارfont-size
مقیاس خود را با درگاه دید تنظیم می کنند. این ویژگی قبلاً با نسخه 4 انتخاب شده بود. -
شکستنتایپوگرافی صفحه نمایش ما را برای جایگزینی
$display-*
متغیرهای ما و با یک$display-font-sizes
نقشه Sass بازسازی کردیم. همچنین$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()
میکسین به 2 پارامتر تغییر نام داده وtable-variant()
می پذیرد:$color
(نام رنگ) و$value
(کد رنگ). رنگ حاشیه و رنگ های تاکیدی به طور خودکار بر اساس متغیرهای فاکتور جدول محاسبه می شوند. -
متغیرهای padding سلول جدول را به
-y
و تقسیم-x
کنید. -
شکستنکلاس را رها
.pre-scrollable
کرد. شماره 29135 را ببینید -
شکستن
.text-*
برنامه های کاربردی دیگر حالت های شناور و تمرکز را به پیوندها اضافه نمی کنند..link-*
به جای آن می توان از کلاس های کمکی استفاده کرد. شماره 29267 را ببینید -
شکستنکلاس را رها
.text-justify
کرد. به #29793 مراجعه کنید -
تنظیم افقی پیش فرض
padding-left
و<ul>
عناصر<ol>
از پیش فرض مرورگر40px
به2rem
. -
اضافه
$enable-smooth-scroll
شد، که در سطح جهانی اعمال می شود — به جز برای کاربرانی که از طریق درخواست رسانهscroll-behavior: smooth
درخواست کاهش حرکت می کنند. به #31877 مراجعه کنیدprefers-reduced-motion
RTL
- متغیرهای خاص جهت افقی، ابزارها و میکسین ها همگی برای استفاده از ویژگی های منطقی مانند آنچه در طرح بندی های flexbox یافت می شوند تغییر نام داده اند - به عنوان مثال،
start
وend
به جایleft
وright
.
تشکیل می دهد
-
فرم های شناور جدید اضافه شد! ما نمونه برچسب های شناور را به اجزای فرم کاملاً پشتیبانی شده ارتقا داده ایم. صفحه جدید برچسب های شناور را ببینید.
-
شکستن عناصر فرم بومی و سفارشی تلفیقی. چک باکسها، رادیوها، انتخابها و ورودیهای دیگری که دارای کلاسهای بومی و سفارشی در نسخه 4 بودند، ادغام شدهاند. اکنون تقریباً تمام عناصر فرم ما کاملاً سفارشی هستند، اکثر آنها بدون نیاز به 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
دیگر تنظیم نمی شود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>
آن جفت می کنیم. به #30650 مراجعه کنید . اسناد این مورد از صفحه دکمههای ما به بخش فرمهای جدید منتقل شدهاند..btn
<label>
-
شکستن برای آب
.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 Icons جایگزین شدند.
دکمه بستن
-
شکستنبرای یک نام کمتر عمومی
.close
به نام تغییر نام داد ..btn-close
-
دکمه های بستن اکنون از یک
background-image
(SVG تعبیه شده) به جای a×
در HTML استفاده می کنند که امکان سفارشی سازی آسان تر را بدون نیاز به لمس نش��نه گذاری شما فراهم می کند. -
.btn-close-white
نوع جدیدی اضافه شده است کهfilter: invert(1)
برای فعال کردن کنتراست بالاتر آیکونها را در پسزمینههای تیرهتر رد میکند.
سقوط - فروپاشی
- لنگر اسکرول برای آکاردئون ها حذف شد.
کشویی
-
اضافه شدن
.dropdown-menu-dark
نوع جدید و متغیرهای مرتبط برای کشویی تاریک بر اساس تقاضا. -
متغیر جدید برای
$dropdown-padding-x
. -
برای بهبود کنتراست، تقسیمکننده کشویی را تیره کرد.
-
شکستنهمه رویدادهای کرکرهای اکنون بر روی دکمه جابهجایی کشویی فعال میشوند و سپس به عنصر والد منتقل میشوند.
-
منوهای کرکره ای اکنون دارای یک
data-bs-popper="static"
مجموعه ویژگی هستند زمانی که مکان بازشو ثابت است وdata-bs-popper="none"
زمانی که کشویی در نوار ناوبری است. این توسط جاوا اسکریپت ما اضافه شده است و به ما کمک می کند از سبک های موقعیت سفارشی بدون تداخل با موقعیت یابی پوپر استفاده کنیم. -
شکستنگزینه حذف
flip
شده برای پلاگین کشویی به نفع پیکربندی بومی Popper. اکنون می توانید با ارسال یک آرایه خالی برایfallbackPlacements
گزینه در اصلاح کننده flip ، رفتار چرخش را غیرفعال کنید. -
منوهای کشویی اکنون می توانند با یک
autoClose
گزینه جدید برای کنترل رفتار بسته شدن خودکار قابل کلیک باشند . می توانید از این گزینه برای پذیرش کلیک در داخل یا خارج از منوی کشویی استفاده کنید تا آن را تعاملی کنید. -
کرکره ها اکنون از
.dropdown-item
s پیچیده شده در<li>
s پشتیبانی می کنند.
جامبوترون
- شکستنکامپوننت jumbotron را حذف کرد زیرا میتوان آن را با ابزارهای برقی تکرار کرد. نمونه جدید Jumbotron ما را برای نسخه ی نمایشی ببینید.
گروه لیست
.list-group-numbered
اصلاح کننده جدید به گروه های لیست اضافه شد.
Navs و Tab
null
متغیرهای جدید برایfont-size
,font-weight
,color
و:hover
color
به.nav-link
کلاس اضافه شد.
نوارهای ناوبری
- شکستننوارهای ناوبری اکنون به یک کانتینر در داخل نیاز دارند (برای ساده کردن نیازهای فاصله و CSS مورد نیاز).
خارج از بوم
- جزء جدید offcanvas اضافه شد .
صفحه بندی
-
پیوندهای صفحهبندی اکنون قابل تنظیم
margin-left
هستند که در صورت جدا شدن از یکدیگر به صورت پویا در تمام گوشهها گرد میشوند. -
transition
s به پیوندهای صفحه بندی اضافه شد.
پاپاورها
-
شکستندر قالب پیشفرض popover ما
.arrow
به تغییر نام داده شد..popover-arrow
-
تغییر نام
whiteList
گزینه بهallowList
.
اسپینرها
-
اسپینرها اکنون
prefers-reduced-motion: reduce
با کاهش سرعت انیمیشن ها افتخار می کنند. به #31882 مراجعه کنید . -
تراز عمودی اسپینر بهبود یافته.
نان تست
-
اکنون می توان نان تست ها را با کمک ابزارهای موقعیت یابی در یک قرار داد .
.toast-container
-
مدت زمان نان تست پیش فرض را به 5 ثانیه تغییر داد.
-
از نان تست ها حذف شده و با s های مناسب با توابع
overflow: hidden
جایگزین شده است.border-radius
calc()
نکات ابزار
-
شکستندر الگوی راهنمای ابزار پیشفرض ما
.arrow
به تغییر نام داده شد..tooltip-arrow
-
شکستنمقدار پیشفرض the برای قرارگیری بهتر عناصر popper
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>
پسزمینه به عناصر اضافی اضافه شد. -
ابزارهای موقعیت جدید برای
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
Sass به تغییر نام داده شده است$aspect-ratios
و مقادیر آن برای گنجاندن نام کلاس و درصد به عنوانkey: value
جفت ساده شده است. - متغیرهای CSS اکنون برای هر مقدار در نقشه Sass تولید و گنجانده شده اند. برای ایجاد نسبت ابعاد سفارشی
--bs-aspect-ratio
، متغیر را تغییر دهید ..ratio
-
شکستن کلاس های "Screen Reader" اکنون کلاس های "Visually hidden" هستند .
- فایل Sass را از
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()
.
- فایل Sass را از
-
bootstrap-utilities.css
اکنون شامل یاران ما نیز می شود. کمک کننده ها دیگر نیازی به وارد شدن در ساخت های سفارشی ندارند.
جاوا اسکریپت
-
وابستگی jQuery را حذف کرد و افزونهها را دوباره نوشت تا در جاوا اسکریپت معمولی باشند.
-
شکستنویژگیهای داده برای همه افزونههای جاوا اسکریپت اکنون دارای فضای نام هستند تا به تشخیص عملکرد بوت استرپ از اشخاص ثالث و کد شما کمک کنند. به عنوان مثال، ما
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 را به عنوان یک آرگومان می پذیرد، بنابراین می توانید این پیکربندی پیش فرض را در مسیر خود ادغام کنید. برای بازشوها، پاپاورها و راهنمای ابزار اعمال میشود. -
برای قرارگیری بهتر عناصر Popper، مقدار پیشفرض the
fallbackPlacements
به تغییر مییابد. برای بازشوها، پاپاورها و راهنمای ابزار اعمال میشود.['top', 'right', 'bottom', 'left']
-
زیرخط از روشهای استاتیک عمومی مانند
_getInstance()
→ حذفgetInstance()
شد.