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

الهجرة إلى v5

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

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

الإصدار 5.2.0

تصميم متجدد

يتميز Bootstrap v5.2.0 بتحديث تصميم دقيق لمجموعة من المكونات والخصائص عبر المشروع ، وعلى الأخص من خلال border-radiusالقيم المحسنة على الأزرار وعناصر التحكم في النموذج . تم تحديث وثائقنا أيضًا بصفحة رئيسية جديدة ، وتخطيط أبسط للمستندات لم يعد يؤدي إلى طي أقسام من الشريط الجانبي ، والمزيد من الأمثلة البارزة لأيقونات Bootstrap .

المزيد من متغيرات CSS

لقد قمنا بتحديث جميع مكوناتنا لاستخدام متغيرات CSS. بينما لا يزال Sass يدعم كل شيء ، تم تحديث كل مكون ليشمل متغيرات CSS في الفئات الأساسية للمكونات (على سبيل المثال ، .btn) ، مما يسمح بمزيد من التخصيص في الوقت الفعلي لـ Bootstrap. في الإصدارات اللاحقة ، سنستمر في توسيع استخدامنا لمتغيرات CSS في التخطيط والنماذج والمساعدات والأدوات المساعدة لدينا. اقرأ المزيد عن متغيرات CSS في كل مكون على صفحات التوثيق الخاصة بها.

سيكون استخدامنا المتغير لـ CSS غير مكتمل إلى حد ما حتى Bootstrap 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

يجب أن تبدو تصميمات Bootstrap 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

مرافق جديدة

تغييرات إضافية

  • قدم $enable-container-classesخيار جديد. - الآن عند الاشتراك في تخطيط CSS Grid التجريبي ، .container-*سيستمر تجميع الفئات ، ما لم يتم تعيين هذا الخيار على false. تحتفظ الحاويات الآن أيضًا بقيم ميزابها.

  • يحتوي مكون Offcanvas الآن على اختلافات متجاوبة . تظل الفئة الأصلية .offcanvasبدون تغيير - فهي تخفي المحتوى عبر جميع إطارات العرض. لجعلها سريعة الاستجابة ، قم بتغيير هذا .offcanvasالفصل إلى أي .offcanvas-{sm|md|lg|xl|xxl}فصل دراسي.

  • يتم الآن اختيار مقسمات الطاولة السميكة. - لقد أزلنا الحد الأكثر سمكًا والأصعب في تجاوز الحد بين مجموعات الجدول ونقلناه إلى فصل دراسي اختياري يمكنك تطبيقه .table-group-divider. انظر جدول المستندات للحصول على مثال.

  • تمت إعادة كتابة Scrollspy لاستخدام واجهة برمجة تطبيقات Intersection Observer ، مما يعني أنك لم تعد بحاجة إلى أغلفة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 على جيثب .

الإصدار 5.1.0

  • تمت إضافة الدعم التجريبي لتخطيط شبكة CSS . - هذا عمل قيد التنفيذ ، وليس جاهزًا بعد للاستخدام الإنتاجي ، ولكن يمكنك الاشتراك في الميزة الجديدة عبر Sass. لتمكينه ، قم بتعطيل الشبكة الافتراضية ، عن طريق ضبط $enable-grid-classes: falseوتمكين شبكة CSS عن طريق الإعداد $enable-cssgrid: true.

  • تم تحديث navbars لدعم offcanvas. - إضافة أدراج offcanvas في أي شريط التنقل مع .navbar-expand-*الفئات المستجيبة وبعض ترميز offcanvas.

  • تمت إضافة عنصر نائب جديد . - أحدث مكون لدينا ، وسيلة لتوفير كتل مؤقتة بدلاً من المحتوى الحقيقي للمساعدة في الإشارة إلى أن هناك شيئًا ما لا يزال يتم تحميله في موقعك أو تطبيقك.

  • يدعم المكوّن الإضافي Collapse الآن الطي الأفقي . - أضف .collapse-horizontalإلى ملفك .collapseلطي widthبدلاً من ملف height. تجنب إعادة رسم المتصفح عن طريق تعيين min-heightأو height.

  • تمت إضافة مساعدين مكدس وقواعد عمودية جديدة. - قم بتطبيق خصائص flexbox المتعددة بسرعة لإنشاء تخطيطات مخصصة مع مكدسات . اختر من مكدسات أفقية ( .hstack) ورأسية ( ). .vstackأضف فواصل رأسية مشابهة <hr>للعناصر باستخدام المساعدين الجدد.vr .

  • :rootتمت إضافة متغيرات CSS عالمية جديدة . - تمت إضافة العديد من متغيرات CSS الجديدة إلى :rootمستوى التحكم في <body>الأنماط. هناك المزيد قيد العمل ، بما في ذلك عبر الأدوات المساعدة والمكونات الخاصة بنا ، ولكن في الوقت الحالي اقرأ متغيرات CSS في قسم التخصيص .

  • تم إصلاح الأدوات المساعدة للألوان والخلفية لاستخدام متغيرات CSS وإضافة عتامة النص الجديدة وأدوات مساعدة تعتيم الخلفية . - .text-* والأدوات .bg-*المساعدة مبنية الآن باستخدام متغيرات CSS rgba()وقيم الألوان ، مما يتيح لك تخصيص أي أداة بسهولة باستخدام أدوات العتامة الجديدة.

  • تمت إضافة أمثلة مقتطفات جديدة مبنية على إظهار كيفية تخصيص مكوناتنا. - استعد لاستخدام المكونات المخصصة وأنماط التصميم الشائعة الأخرى باستخدام أمثلة Snippets الجديدة . يتضمن التذييلات والقوائم المنسدلة ومجموعات القوائم والشروط . _

  • تمت إزالة أنماط تحديد المواقع غير المستخدمة من العناصر المنبثقة وتلميحات الأدوات حيث يتم التعامل معها فقط بواسطة Popper. $tooltip-marginتم إهماله وتعيينه nullفي العملية.

هل تريد المزيد من المعلومات؟ اقرأ منشور المدونة v5.1.0.

مرحبًا يا من هناك! تم توثيق التغييرات التي تم إجراؤها على أول إصدار رئيسي من Bootstrap 5 ، v5.0.0 ، أدناه. لا تعكس التغييرات الإضافية الموضحة أعلاه.

التبعيات

  • تم إسقاط 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-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.

  • تمت إضافة خاصية مخصصة جديدة --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"سمة معينة عندما يكون موضع القائمة المنسدلة ثابتًا ، أو عندما تكون القائمة المنسدلة في شريط التنقل. تمت إضافة هذا من خلال JavaScript الخاص بنا ويساعدنا في استخدام أنماط الموضع المخصصة دون التدخل في تحديد موقع Popper.

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

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

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

جمبوترون

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

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

أوفاكانفاس

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

  • أصبحت روابط ترقيم الصفحات قابلة للتخصيص الآن 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
    • أعيدت تسميته sr-only()و sr-only-focusable()mixins إلى visually-hidden()و visually-hidden-focusable().

  • bootstrap-utilities.cssالآن يشمل أيضًا مساعدينا. لا يلزم استيراد المساعدين في تصميمات مخصصة بعد الآن.

جافا سكريبت

  • تم إسقاط تبعية jQuery وإعادة كتابة الإضافات لتكون في JavaScript عادي.

  • كسرأصبحت سمات البيانات لجميع مكونات JavaScript الإضافية الآن في نطاق أسماء للمساعدة في التمييز بين وظائف Bootstrap والأطراف الثالثة والتعليمات البرمجية الخاصة بك. على سبيل المثال ، نستخدم 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 كوسيطة ، بحيث يمكنك دمج هذا التكوين الافتراضي بطريقتك. ينطبق على القوائم المنسدلة والقائمة المنبثقة وتلميحات الأدوات.

  • fallbackPlacementsتم تغيير القيمة الافتراضية لـ من ['top', 'right', 'bottom', 'left']أجل وضع أفضل لعناصر Popper. ينطبق على القوائم المنسدلة والقائمة المنبثقة وتلميحات الأدوات.

  • تمت إزالة الشرطة السفلية من الطرق الثابتة العامة مثل _getInstance()→ getInstance().