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

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

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

در این صفحه

نسخه 5.2.0

طراحی تازه شده

Bootstrap v5.2.0 دارای یک به روز رسانی طراحی ظریف برای تعداد انگشت شماری از مؤلفه ها و ویژگی ها در سراسر پروژه است، به ویژه از طریق border-radiusمقادیر اصلاح شده روی دکمه ها و کنترل های فرم . اسناد ما همچنین با یک صفحه اصلی جدید، طرح‌بندی اسناد ساده‌تر که دیگر بخش‌های نوار کناری را جمع نمی‌کند و نمونه‌های برجسته‌تری از نمادهای بوت استرپ به‌روزرسانی شده است .

متغیرهای CSS بیشتر

ما تمام اجزای خود را برای استفاده از متغیرهای CSS به روز کرده ایم. در حالی که Sass هنوز زیربنای همه چیز است، هر مؤلفه به‌روزرسانی شده است تا متغیرهای CSS را در کلاس‌های پایه مؤلفه (مثلاً .btn) شامل شود، که امکان سفارشی‌سازی زمان واقعی Bootstrap را فراهم می‌کند. در نسخه‌های بعدی، ما به گسترش استفاده از متغیرهای CSS در طرح‌بندی، فرم‌ها، کمک‌کنندگان و ابزارهای کمکی خود ادامه خواهیم داد. در مورد متغیرهای CSS در هر مؤلفه در صفحات اسناد مربوطه آنها بیشتر بخوانید.

استفاده از متغیر CSS ما تا بوت استرپ 6 تا حدودی ناقص خواهد بود. در حالی که ما دوست داریم اینها را به طور کامل در سراسر تخته پیاده سازی کنیم، اما خطر ایجاد تغییرات شکسته را دارند. به عنوان مثال، اگر به دلایلی $alert-border-width: var(--bs-border-width)این کار را انجام می‌دادید، تنظیم در کد منبع ما، Sass بالقوه را در کد شما خراب می‌کند.$alert-border-width * 2

به این ترتیب، تا جایی که امکان داشته باشد، ما به سمت متغیرهای بیشتر CSS ادامه خواهیم داد، اما لطفاً متوجه شوید که اجرای ما ممکن است در نسخه 5 کمی محدود باشد.

جدید_maps.scss

Bootstrap v5.2.0 یک فایل Sass جدید با _maps.scss. چندین نقشه Sass _variables.scssرا برای رفع مشکلی که در آن به‌روزرسانی‌های یک نقشه اصلی برای نقشه‌های ثانویه که آنها را گسترش می‌دهند اعمال نمی‌شود، بیرون می‌کشد. به‌عنوان مثال، به‌روزرسانی‌های $theme-colorsمربوط به نقشه‌های موضوعی دیگر که به اتکا داشتند $theme-colors، اعمال نمی‌شدند و جریان‌های کاری سفارشی‌سازی کلیدی را شکستند. به طور خلاصه، Sass محدودیتی دارد که در آن زمانی که یک متغیر یا نقشه پیش‌فرض استفاده شد، نمی‌توان آن را به‌روزرسانی کرد. کاستی مشابهی در مورد متغیرهای CSS وجود دارد که از آنها برای نوشتن سایر متغیرهای CSS استفاده می شود.

به همین دلیل است که سفارشی‌سازی‌های متغیر در Bootstrap باید بعد از آن انجام شود @import "functions"، اما قبل @import "variables"و بقیه پشته واردات ما. همین امر در مورد نقشه‌های Sass نیز صدق می‌کند—شما باید پیش‌فرض‌ها را قبل از استفاده از آنها لغو کنید. نقشه های زیر به نقشه جدید منتقل شده اند _maps.scss:

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

بیلدهای سفارشی بوت استرپ 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 Grid، .container-*کلاس‌ها همچنان کامپایل می‌شوند، مگر اینکه این گزینه روی تنظیم شود false. ظروف نیز اکنون ارزش ناودان خود را حفظ می کنند.

  • مؤلفه Offcanvas اکنون دارای تغییرات پاسخگو است . کلاس اصلی .offcanvasبدون تغییر باقی می‌ماند - محتوا را در همه پورت‌های نمایش پنهان می‌کند. برای ریسپانسیو کردن آن .offcanvasکلاس را به هر .offcanvas-{sm|md|lg|xl|xxl}کلاسی تغییر دهید.

  • تقسیم‌کننده‌های جدول ضخیم‌تر اکنون انتخاب شده‌اند. - ما حاشیه ضخیم‌تر و نادیده گرفتن آن دشوارتر را بین گروه‌های جدول حذف کرده‌ایم و آن را به یک کلاس اختیاری که می‌توانید اعمال کنید، منتقل کرده‌ایم .table-group-divider. برای مثال به اسناد جدول مراجعه کنید.

  • Scrollspy برای استفاده از Intersection Observer API بازنویسی شده است ، به این معنی که دیگر نیازی به بسته‌بندی‌های والد نسبی، تنظیمات منسوخoffsetو غیره ندارید. به دنبال پیاده سازی های Scrollspy خود باشید تا در برجسته سازی ناوبری دقیق تر و سازگارتر باشند.

  • پاپاورها و راهنمای ابزار اکنون از متغیرهای 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 مراجعه کنید.

نسخه 5.1.0

  • پشتیبانی آزمایشی برای طرح بندی شبکه CSS اضافه شده است . - این یک کار در حال انجام است و هنوز برای استفاده در تولید آماده نیست، اما می‌توانید از طریق Sass از ویژگی جدید استفاده کنید. برای فعال کردن آن، شبکه پیش‌فرض را با تنظیم غیرفعال کنید و با تنظیم $enable-grid-classes: falseCSS Grid را فعال کنید $enable-cssgrid: true.

  • نوارهای ناوبری به روز شده برای پشتیبانی از offcanvas. - کشوهای offcanvas را در هر نوار ناوبری با .navbar-expand-*کلاس‌های واکنش‌گرا و برخی نشانه‌گذاری‌های offcanvas اضافه کنید.

  • مولفه مکان نگهدار جدید اضافه شد. - جدیدترین مؤلفه ما، راهی برای ارائه بلوک های موقت به جای محتوای واقعی برای کمک به نشان دادن اینکه چیزی هنوز در سایت یا برنامه شما در حال بارگذاری است.

  • افزونه Collapse اکنون از جمع شدن افقی پشتیبانی می کند . - اضافه کردن .collapse-horizontalبه خود .collapseبرای جمع کردن widthبه جای height. min-heightبا تنظیم یک یا از رنگ آمیزی مجدد مرورگر خودداری کنید height.

  • کمک‌کننده‌های جدید پشته و قانون عمودی اضافه شد. - به سرعت چندین ویژگی flexbox را برای ایجاد سریع طرح‌بندی‌های سفارشی با پشته‌ها اعمال کنید. از میان پشته های افقی ( .hstack) و عمودی ( ) انتخاب کنید. با کمک‌کننده‌های جدید ، تقسیم‌کننده‌های.vstack عمودی مشابه <hr>عناصر را اضافه کنید ..vr

  • متغیرهای جهانی :rootCSS جدید اضافه شد. - چندین متغیر CSS جدید :rootبرای کنترل <body>سبک ها به سطح اضافه شده است. موارد بیشتری از جمله در ابزارها و مؤلفه‌های ما در حال انجام است، اما در حال حاضر متغیرهای CSS را در بخش سفارشی کردن بخوانید .

  • ابزارهای رنگ و پس‌زمینه را برای استفاده از متغیرهای CSS بازبینی کرد و ابزارهای جدید کدورت متن و کدورت پس‌زمینه را اضافه کرد . - .text-* و .bg-*ابزارهای کمکی اکنون با متغیرهای CSS و rgba()مقادیر رنگ ساخته شده‌اند و به شما این امکان را می‌دهند که به راحتی هر ابزاری را با ابزارهای opacity جدید سفارشی کنید.

  • نمونه‌های قطعه جدید اضافه شد تا نشان دهد چگونه اجزای خود را سفارشی کنیم. - با نمونه‌های Snippets جدید، آماده استفاده از اجزای سفارشی‌شده و دیگر الگوهای طراحی رایج باشید . شامل پاورقی ها , کرکره ها , گروه های لیست و مدال می باشد .

  • سبک‌های موقعیت‌یابی استفاده نشده را از پاپ‌اورها و راهنمای ابزار حذف کرد ، زیرا فقط توسط Popper مدیریت می‌شود. $tooltip-marginمنسوخ شده و nullدر حال انجام است.

اطلاعات بیشتری می خواهید؟ پست وبلاگ v5.1.0 را بخوانید.

سلام! تغییرات اولین نسخه اصلی ما از Bootstrap 5، نسخه 5.0.0، در زیر مستند شده است. آنها تغییرات اضافی نشان داده شده در بالا را منعکس نمی کنند.

وابستگی ها

  • 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-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-textدیگر تنظیم نمی شود 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>آن جفت می کنیم. به #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"مجموعه ویژگی هستند وقتی که مکان بازشو ایستا است، یا کشویی در نوار ناوبری است. این توسط جاوا اسکریپت ما اضافه شده است و به ما کمک می کند از سبک های موقعیت سفارشی بدون تداخل با موقعیت یابی پوپر استفاده کنیم.

  • شکستنگزینه حذف flipشده برای پلاگین کشویی به نفع پیکربندی بومی Popper. اکنون می توانید با ارسال یک آرایه خالی برای fallbackPlacementsگزینه در اصلاح کننده flip ، رفتار چرخش را غیرفعال کنید.

  • منوهای کشویی اکنون می توانند با یک autoCloseگزینه جدید برای کنترل رفتار بسته شدن خودکار قابل کلیک باشند . می توانید از این گزینه برای پذیرش کلیک در داخل یا خارج از منوی کشویی استفاده کنید تا آن را تعاملی کنید.

  • کرکره ها اکنون از .dropdown-items پیچیده شده در <li>s پشتیبانی می کنند.

جامبوترون

گروه لیست

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

خارج از بوم

  • جزء جدید 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 را برای ایجاد یک نمونه جدید از افزونه ارسال کنید:

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

  • popperConfigمی تواند به عنوان تابعی ارسال شود که پیکربندی پیش فرض Popper Bootstrap را به عنوان یک آرگومان می پذیرد، بنابراین می توانید این پیکربندی پیش فرض را در مسیر خود ادغام کنید. برای بازشوها، پاپاورها و راهنمای ابزار اعمال می شود.

  • برای قرارگیری بهتر عناصر Popper، مقدار پیش‌فرض the fallbackPlacementsبه تغییر می‌یابد. برای بازشوها، پاپ‌اورها و راهنمای ابزار اعمال می‌شود.['top', 'right', 'bottom', 'left']

  • زیرخط از روش‌های استاتیک عمومی مانند _getInstance()→ حذف getInstance()شد.