تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

الهجرة إلى v5

تتبع ومراجعة التغييرات التي تم إجراؤها على ملفات Bootstrap المصدر والوثائق والمكونات لمساعدتك على الترحيل من الإصدار 4 إلى الإصدار الخامس.

على هذه الصفحة

التبعيات

  • تم إسقاط jQuery.
  • تمت الترقية من Popper v1.x إلى Popper v2.x.
  • تم استبدال Libsass بـ Dart Sass حيث تم إهمال مترجم Sass المعطى Libsass.
  • تم الترحيل من Jekyll إلى Hugo لبناء وثائقنا

دعم المتصفح

  • تم إسقاط Internet Explorer 10 و 11
  • تم إسقاط Microsoft Edge <16 (Legacy Edge)
  • تم إسقاط Firefox <60
  • إسقاط سفاري <12
  • تم إسقاط iOS Safari <12
  • إسقاط Chrome <60

تغييرات التوثيق

  • إعادة تصميم الصفحة الرئيسية وتخطيط المستندات والتذييل.
  • تمت إضافة دليل طرد جديد .
  • تمت إضافة قسم تخصيص جديد ، واستبدال صفحة Theming v4 ، بتفاصيل جديدة عن Sass ، وخيارات التكوين العامة ، وأنظمة الألوان ، ومتغيرات CSS ، والمزيد.
  • أعد تنظيم جميع وثائق النموذج في قسم النماذج الجديد ، مما أدى إلى تقسيم المحتوى إلى صفحات أكثر تركيزًا.
  • وبالمثل ، تم تحديث قسم Layout لتجسيد محتوى الشبكة بشكل أكثر وضوحًا.
  • تمت إعادة تسمية صفحة مكون "التنقلات" إلى "التنقلات وعلامات التبويب".
  • إعادة تسمية صفحة "��لشيكات" إلى "الشيكات وأجهزة الراديو".
  • تمت إعادة تصميم شريط التنقل وإضافة صفحة فرعية جديدة لتسهيل التعرف على إصدارات مواقعنا ومستنداتنا.
  • تمت إضافة اختصار لوحة مفاتيح جديد لحقل البحث Ctrl + /:.

ساس

  • لقد تخلصنا من عمليات دمج خريطة Sass الافتراضية لتسهيل إزالة القيم الزائدة عن الحاجة. ضع في اعتبارك أنه يتعين عليك الآن تحديد جميع القيم في خرائط 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()mixin. استخدم .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()لتجنب الاصطدام بوظيفة قياس الألوان الخاصة بـ Sass.

  • box-shadowتسمح الآن mixins nullبالقيم وإسقاطها noneمن الوسائط المتعددة. انظر # 30394 .

  • يحتوي border-radius()mixin الآن على قيمة افتراضية.

نظام الألوان

  • نظام الألوان الذي عمل مع نظام ألوان color-level()جديد $theme-color-intervalوأزيل لصالحه. يتم استبدال جميع الوظائف الموجودة في قاعدة الشفرة lighten()الخاصة بنا بـ و . ستعمل هذه الوظائف على مزج اللون مع الأبيض أو الأسود بدلاً من تغيير الإضاءة بمقدار ثابت. سوف يقوم إما بتلوين اللون أو تظليله بناءً على ما إذا كانت معلمة الوزن موجبة أو سلبية. راجع # 30622 لمزيد من التفاصيل.darken()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 وصفحة الأدوات المرنة للحصول على مثال .

  • كسر bootstrap-grid.cssالآن ينطبق فقط على box-sizing: border-boxالعمود بدلاً من إعادة تعيين حجم الصندوق العام. بهذه الطريقة ، يمكن استخدام أنماط الشبكة الخاصة بنا في أماكن أكثر دون تدخل.

  • $enable-grid-classesلم يعد يعطل إنشاء فئات الحاويات بعد الآن. انظر # 29146.

  • تم تحديث make-colالمزيج إلى الإعداد الافتراضي ليكون متساويًا في الأعمدة بدون حجم محدد.

المحتوى ، إعادة التشغيل ، إلخ

  • يتم الآن تمكين 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()mixin table-variant()ويقبل معلمتين فقط: $color(اسم اللون) و $value(رمز اللون). يتم حساب لون الحدود وألوان التمييز تلقائيًا بناءً على متغيرات عامل الجدول.

  • تقسيم متغيرات حشو خلايا الجدول إلى -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عالميًا - باستثناء المستخدمين الذين يطلبون تقليل الحركة من خلال prefers-reduced-motionاستعلام الوسائط. انظر # 31877

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.

  • تمت إضافة خاصية مخصصة جديدة --bs-breadcrumb-dividerلـ CSS لسهولة التخصيص دون الحاجة إلى إعادة ترجمة CSS.

أزرار

  • كسر أزرار التبديل ، مع مربعات الاختيار أو أجهزة الراديو ، لم تعد تتطلب JavaScript ولديها ترميز جديد. لم نعد نحتاج إلى عنصر التفاف ، ونضيفه.btn-checkإلى<input>، ونقرنه بأي.btnفئات في<label>. انظر # 30650 . تم نقل المستندات الخاصة بذلك من صفحة الأزرار الخاصة بنا إلى قسم النماذج الجديد.

  • كسر تم إسقاطه .btn-blockللمرافق. بدلاً من الاستخدام .btn-blockعلى .btnالزر ، قم بلف الأزرار باستخدام .d-gridأداة .gap-*مساعدة لتباعدهم حسب الحاجة. قم بالتبديل إلى الفئات المستجيبة لمزيد من التحكم فيها. اقرأ المستندات للحصول على بعض الأمثلة.

  • تم تحديثها button-variant()و button-outline-variant()mixins لدعم معلمات إضافية.

  • تم تحديث الأزرار لضمان زيادة التباين في حالة التمرير والحالة النشطة.

  • أزرار المعوقين لديها الآن pointer-events: none;.

بطاقة

  • كسرتسقط .card-deckلصالح شبكتنا. قم بلف بطاقاتك في فئات الأعمدة وأضف .row-cols-*حاوية رئيسية لإعادة إنشاء مجموعات البطاقات (ولكن مع مزيد من التحكم في المحاذاة سريعة الاستجابة).

  • كسرأسقط .card-columnsلصالح الماسونية. انظر # 28922 .

  • كسرتم استبدال .cardالأكورديون الأساسي بمكون أكورديون جديد .

  • تمت إضافة .carousel-darkمتغير جديد للنصوص الداكنة وعناصر التحكم والمؤشرات (رائعة للخلفيات الفاتحة).

  • تم استبدال أيقونات شيفرون لعناصر التحكم في الرف الدائري بأيقونات SVG جديدة من أيقونات Bootstrap .

زر الاغلاق

  • كسرأعيدت تسميته .closeلاسم .btn-closeأقل عمومية.

  • تستخدم أزرار الإغلاق الآن background-image(SVG مضمنًا) بدلاً من تنسيق &times;HTML ، مما يتيح سهولة التخصيص دون الحاجة إلى لمس العلامات الخاصة بك.

  • تمت إضافة .btn-close-whiteمتغير جديد يستخدم filter: invert(1)لتمكين تباين أعلى لرفض الرموز مقابل الخلفيات الداكنة.

انهيار

  • تم إزالة إرساء التمرير للأكورديون.

  • تمت إضافة .dropdown-menu-darkمتغير جديد ومتغيرات مرتبطة به لقوائم داكنة عند الطلب.

  • تمت إضافة متغير جديد لـ $dropdown-padding-x.

  • قم بتغميق حاجز القائمة المنسدلة لتحسين التباين.

  • كسريتم الآن تشغيل جميع الأحداث الخاصة بالقائمة المنسدلة على زر تبديل القائمة المنسدلة ثم يتم تشغيلها حتى تصل إلى العنصر الأصلي.

  • تحتوي القوائم المنسدلة الآن على data-bs-popper="static"سمة معينة عندما يكون موضع القائمة المنسدلة ثابتًا data-bs-popper="none"وعندما تكون القائمة المنسدلة في شريط التنقل. تمت إضافة هذا من خلال JavaScript الخاص بنا ويساعدنا في استخدام أنماط الموضع المخصصة دون التدخل في تحديد موقع Popper.

  • كسرflipخيار تم إسقاطه لإضافات قائمة منسدلة لصالح تكوين Popper الأصلي . يمكنك الآن تعطيل سلوك التقليب بتمرير مصفوفة فارغة fallbackPlacementsللخيار في معدل الوجه .

  • يمكن الآن أن تكون القوائم المنسدلة قابلة للنقر autoCloseبخيار جديد للتعامل مع سلوك الإغلاق التلقائي . يمكنك استخدام هذا الخيار لقبول النقر داخل أو خارج القائمة المنسدلة لجعلها تفاعلية.

  • القوائم المنسدلة تدعم الآن .dropdown-itemملفوفة في <li>s.

جمبوترون

مجموعة القائمة

  • تمت إضافة nullمتغيرات font-sizeجديدة للفصل font-weightالدراسي color.:hover color.nav-link
  • كسرتتطلب Navbars الآن حاوية داخل (لتبسيط متطلبات التباعد بشكل كبير و CSS المطلوبة).

أوفاكانفاس

ترقيم الصفحات

  • أصبحت روابط ترقيم الصفحات قابلة للتخصيص الآن margin-leftويتم تقريبها ديناميكيًا في جميع الزوايا عند فصلها عن بعضها البعض.

  • تمت إضافة transitionروابط ترقيم الصفحات.

بوبوفرز

  • كسرتمت إعادة تسميته .arrowفي .popover-arrowنموذجنا المنبثق الافتراضي.

  • إعادة تسمية whiteListالخيار إلى allowList.

الغزالون

  • يتم تكريم المغازل الآن prefers-reduced-motion: reduceمن خلال إبطاء الرسوم المتحركة. انظر # 31882 .

  • محاذاة رأسية محسّنة للعجلة الدوارة.

الخبز المحمص

  • يمكن الآن وضع الخبز المحمص في أ .toast-containerبمساعدة تحديد المواقع .

  • تم تغيير مدة الخبز المحمص الافتراضية إلى 5 ثوانٍ.

  • تُزال 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>لعناصر إضافية.

  • تمت إضافة أدوات مساعدة للمواضع الجديدة لـ 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انظر هنا .

  • نقلت .d-noneالأداة المساعدة في CSS لإعطائها وزنًا أكبر على أدوات العرض الأخرى.

  • مدد .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لإنشاء أي نسبة أبعاد مخصصة .

  • كسر أصبحت فئات "قارئ الشاشة" الآن فئات "مخفية بصريًا" .

    • تم تغيير ملف Sass من scss/helpers/_screenreaders.scssإلىscss/helpers/_visually-hidden.scss
    • تمت إعادة تسميته .sr-onlyوإلى .sr-only-focusableو.visually-hidden.visually-hidden-focusable
    • Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().

  • bootstrap-utilities.css now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.

JavaScript

  • Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.

  • Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

  • All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:

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

  • popperConfig can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.

  • The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.

  • Removed underscore from public static methods like _getInstance() → getInstance().