رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

مهاجرت به نسخه 5

تغییرات فایل‌های منبع بوت استرپ، اسناد و اجزای آن را ردیابی و بررسی کنید تا به شما در مهاجرت از نسخه 4 به نسخه 5 کمک کند.

در این صفحه

وابستگی ها

  • jQuery حذف شد.
  • از Popper v1.x به Popper v2.x ارتقا یافت.
  • Libsass را با 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شوند.

  • شکستنپارامترهای ترکیبی پرس و جوی رسانه برای یک رویکرد منطقی تر تغییر کرده اند.

    • 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-shadowmixins اکنون 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-colmixin را به‌صورت پیش‌فرض به ستون‌های مساوی بدون اندازه مشخص به‌روزرسانی کرد .

محتوا، راه اندازی مجدد و غیره

  • اکنون 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) .trthtd

  • شکستنtable-row-variant()میکسین به 2 پارامتر تغییر نام داده و table-variant()می پذیرد: $color(نام رنگ) و $value(کد رنگ). رنگ حاشیه و رنگ های تاکیدی به طور خودکار بر اساس متغیرهای فاکتور جدول محاسبه می شوند.

  • متغیرهای padding سلول جدول را به -yو تقسیم -xکنید.

  • شکستنکلاس را رها .pre-scrollableکرد. شماره 29135 را ببینید

  • شکستن .text-*برنامه های کاربردی دیگر حالت های شناور و تمرکز را به پیوندها اضافه نمی کنند. .link-*به جای آن می توان از کلاس های کمکی استفاده کرد. به #29267 مراجعه کنید

  • شکستنکلاس را رها .text-justifyکرد. به #29793 مراجعه کنید

  • شکستن <hr>اکنون عناصر heightبه جای استفاده از ویژگی borderبرای پشتیبانی بهتر از sizeویژگی استفاده می شوند. این همچنین استفاده از ابزارهای بالشتک را برای ایجاد تقسیم کننده های ضخیم تر (مثلاً <hr class="py-1">) امکان پذیر می کند.

  • تنظیم افقی پیش فرض 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 &times;در 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-items پیچیده شده در <li>s پشتیبانی می کنند.

جامبوترون

گروه لیست

  • nullمتغیرهای جدید برای font-size،،، font-weightو colorبه :hover colorکلاس اضافه شده .nav-linkاست.
  • شکستننوارهای ناوبری اکنون به یک کانتینر در داخل نیاز دارند (برای ساده کردن نیازهای فاصله و CSS مورد نیاز).

خارج از بوم

  • جزء جدید offcanvas اضافه شد .

صفحه بندی

  • پیوندهای صفحه‌بندی اکنون قابل تنظیم margin-leftهستند که در صورت جدا شدن از یکدیگر به صورت پویا در تمام گوشه‌ها گرد می‌شوند.

  • transitions به پیوندهای صفحه بندی اضافه شد.

پاپاورها

  • شکستندر قالب پیش‌فرض popover ما .arrowبه تغییر نام داده شد..popover-arrow

  • تغییر نام whiteListگزینه به allowList.

اسپینرها

  • اسپینرها اکنون prefers-reduced-motion: reduceبا کاهش سرعت انیمیشن ها افتخار می کنند. به #31882 مراجعه کنید .

  • تراز عمودی اسپینر بهبود یافته.

نان تست

  • اکنون می توان نان تست ها را با کمک ابزارهای موقعیت یابی در یک قرار داد ..toast-container

  • مدت زمان نان تست پیش فرض را به 5 ثانیه تغییر داد.

  • از نان تست ها حذف شده و با s های مناسب با توابع overflow: hiddenجایگزین شده است.border-radiuscalc()

نکات ابزار

  • شکستندر الگوی راهنمای ابزار پیش‌فرض ما .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-ratiosSass به تغییر نام داده شده است $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().

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