الترحيل والإنتقال إلى v5

v5.3.6

التبعيات (Dependencies)

• تم الانتقال من Hugo إلى Astro لبناء وثائقنا.

v5.3.0

إذا كنت تقوم بالترحيل من إصدارات alpha السابقة الخاصة بـ v5.3.0، فيرجى مراجعة التغييرات الخاصة بها بالإضافة إلى هذا القسم.

مساعدون (Helpers)

• أصبحت الروابط الملونة تستخدم !important مرة أخرى لكي تعمل بشكل أفضل مع أدوات الروابط الجديدة التي أضفناها مؤخراً.

الأدوات المساعدة (Utilities)

• تمت إضافة أداة العرض الجديدة .d-inline-grid ضمن أدوات العرض المساعدة.

v5.3.0-alpha2

إذا كنت تقوم بالترحيل من إصدار alpha السابق الخاص بـ v5.3.0 فيرجى مراجعة التغييرات المدرجة أدناه.

متغيرات الـ (CSS)

• تمت إزالة عدة متغيرات CSS جذرية مكررة وغير مستخدمة.

أنماط الألوان (Color modes)

• أصبحت ألوان الوضع الداكن (Dark mode) الآن مشتقة من ألوان السمة الخاصة بنا (على سبيل المثال $primary) في الـ Sass، بدلاً من تدرجات أو ظلال محددة للألوان (على سبيل المثال $blue-300). وهذا يسمح بوضع داكن أكثر أتمتة عند تخصيص ألوان السمة الافتراضية.

• تمت إضافة خرائط (maps) في الـ Sass لإنشاء ألوان السمة لنصوص الوضع الداكن، والخلفية الخفيفة، والحدود الخفيفة.

• أمثلة المقتطفات أصبحت الآن جاهزة للوضع الداكن مع تحديث علامات التكوين (markup) وتقليل الأنماط المخصصة.

• تمت إضافة color-scheme: dark إلى CSS الخاص بالوضع الداكن لتغيير عناصر التحكم على مستوى نظام التشغيل مثل أشرطة التمرير.

• أصبحت حالات border-color للتحقق من صحة النماذج وحالات color للنصوص تستجيب الآن للوضع الداكن، بفضل متغيرات Sass و CSS الجديدة.

• تم التخلي عن متغيرات CSS لخلفية عناصر التحكم في النماذج التي تمت إضافتها مؤخراً، وأعيد تعيين متغيرات Sass لاستخدام متغيرات CSS بدلاً من ذلك. وهذا يبسط التنسيق عبر أنماط الألوان ويتجنب مشكلة عدم تحديث عناصر التحكم في النماذج بشكل صحيح في الوضع الداكن.

• ستظل ظلال الصناديق box-shadow الخاصة بنا دائماً داكنة بدلاً من الانعكاس إلى اللون الأبيض عند تفعيل الوضع الداكن.

• تحسين HTML و JavaScript لسكربت تبديل نمط الألوان. تم تحسين المحدد الخاص بتغيير الـ SVG النشط، وجعل علامات التكوين (markup) أكثر سهولة في الوصول باستخدام سمات ARIA.

• تحسين ألوان بناء جملة الأكواد في المستندات والمزيد عبر الأنماط الفاتحة والداكنة.

تنسيق النصوص (Typography)

• لم نعد نحدد لوناً لـ $headings-color-dark أو --bs-heading-color للوضع الداكن. لتجنب عدة مشاكل في ظهور العناوين داخل المكونات بلون خاطئ، قمنا بتعيين متغير Sass إلى null وأضفنا فحص null كما نفعل في الوضع الفاتح الافتراضي.

المكونات (Components)

• أصبحت البطاقات (Cards) الآن تحتوي على color محدداً عليها لتحسين العرض عبر أنماط الألوان.

• إضافة متغير .nav-underline جديد للتنقل الخاص بنا مع حد سفلي أبسط تحت رابط التنقل النشط. راجع المستندات للحصول على مثال.

• تحتوي عناصر التنقل (Navs) الآن على أنماط :focus-visible جديدة تتناسب بشكل أفضل مع أنماط تركيز الأزرار المخصصة لدينا.

المساعدون (Helpers)

• إضافة مساعد .icon-link جديد لوضع ومحاذاة أيقونات Bootstrap بسرعة بجانب رابط نصي. تدعم روابط الأيقونات أيضاً أدوات الروابط الجديدة لدينا.

• إضافة مساعد حلقة التركيز (focus ring) الجديد لإزالة الـ outline الافتراضي وتعيين حلقة تركيز box-shadow مخصصة.

الأدوات المساعدة (Utilities)

• إعادة تسمية متغيرات Sass و CSS من ${color}-text إلى ${color}-text-emphasis لتطابق الأدوات المساعدة المرتبطة بها.

• إضافة مساعد .link-body-emphasis جديد إلى جانب الروابط الملونة. يقوم هذا بإنشاء رابط ملون باستخدام لون التأكيد المتوافق مع نمط الألوان.

• إضافة أدوات مساعدة جديدة للروابط لشفافية لون الرابط، وإزاحة الخط السفلي، ولون الخط السفلي، وشفافية الخط السفلي. استكشف أدوات الروابط الجديدة.

• تمت إعادة أدوات border-width القائمة على متغيرات CSS لتعيين خاصيتها مباشرة (كما كان الحال قبل v5.2.0). وهذا يتجنب مشاكل الوراثة عبر العناصر المتداخلة، بما في ذلك الجداول.

• إضافة أداة .border-black جديدة لتطابق أدوات .text-black و .bg-black.

• مستبعد أصبحت الأداة المساعدة .text-muted ومتغير Sass المسمى $text-muted مستبعدين وتم استبدالهما بـ .text-body-secondary و $body-secondary-color.

المستندات (Docs)

• يتم الآن عرض الأمثلة بنمط اللون الفاتح أو الداكن المناسب حسب الإعداد في مستنداتنا. يحتوي كل مثال على منتقٍ فردي لنمط الألوان.

• تحسين JavaScript المضمن لعرض Toast المباشر.

• إضافة محتويات مستودع twbs/examples إلى أعلى صفحة الأمثلة.

الأدوات (Tooling)

• إضافة اختبار SCSS عبر True للمساعدة في اختبار API الأدوات المساعدة والتخصيصات الأخرى.

• استبدال حالات مشروع bootstrap-npm-starter بمستودع twbs/examples الأحدث والأكثر اكتمالاً.

للحصول على قائمة كاملة بالتغييرات، راجع مشروع v5.3.0-alpha2 على GitHub.

v5.3.0-alpha1

نمط الألوان (Color modes!)

تعرّف على المزيد من خلال قراءة مستندات أوضاع الألوان الجديدة.

• دعم عالمي لأنماط الألوان الفاتحة (الافتراضية) والداكنة. قم بتعيين نمط الألوان عالمياً على عنصر :root، أو على مجموعات من العناصر والمكونات باستخدام فئة غلاف (wrapper class)، أو مباشرة على المكونات، باستخدام data-bs-theme="light|dark". يتضمن ذلك أيضاً مزج (mixin) جديد باسم color-mode() يمكنه إخراج مجموعة قواعد باستخدام محدد data-bs-theme أو استعلام وسائط (media query)، حسب تفضيلك.

  مستبعد تحل أنماط الألوان محل المتغيرات الداكنة للمكونات، لذا فإن .btn-close-white و .carousel-dark و .dropdown-menu-dark و .navbar-dark مستبعدة.

• نظام ألوان ممتد جديد. لقد أضفنا ألوان سمة جديدة (ولكن ليست في $theme-colors) للحصول على لوحة ألوان أكثر دقة وشاملة للنظام مع ألوان ثانوية وثالثية وألوان تأكيد جديدة لـ color و background-color. هذه الألوان الجديدة متاحة كمتغيرات Sass، ومتغيرات CSS، وأدوات مساعدة.

• لقد قمنا أيضاً بتوسيع متغيرات Sass الخاصة بألوان السمة، ومتغيرات CSS، والأدوات المساعدة لتشمل تأكيد النص، وألوان الخلفية الخفيفة، وألوان الحدود الخفيفة. هذه متاحة كمتغيرات Sass، ومتغيرات CSS، وأدوات مساعدة.

• إضافة ورقة أنماط (stylesheet) جديدة باسم _variables-dark.scss لاستضافة التجاوزات الخاصة بالوضع الداكن. يجب استيراد ورقة الأنماط هذه مباشرة بعد ملف _variables.scss الحالي في مكدس الاستيراد الخاص بك.

  diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
  index 8f8296def..449d70487 100644
  --- a/scss/bootstrap.scss
  +++ b/scss/bootstrap.scss
  @@ -6,6 +6,7 @@
   // Configuration
   @import "functions";
   @import "variables";
  +@import "variables-dark";
   @import "maps";
   @import "mixins";
   @import "utilities";
  

متغيرات الـ (CSS)

• استعادة متغيرات CSS لنقاط التوقف (breakpoints)، على الرغم من أننا لا نستخدمها في استعلامات الوسائط (media queries) لأنها غير مدعومة. ومع ذلك، يمكن أن تكون هذه مفيدة في سياقات خاصة بـ JS.

• وفقاً لتحديث أنماط الألوان، أضفنا أدوات مساعدة جديدة لمتغيرات Sass CSS الجديدة لألوان النصوص والخلفيات secondary و tertiary، بالإضافة إلى {color}-bg-subtle و {color}-border-subtle و {color}-text-emphasis لألوان السمة الخاصة بنا. هذه الألوان الجديدة متاحة من خلال متغيرات Sass و CSS (ولكن ليس عبر خرائط الألوان الخاصة بنا) بهدف صريح وهو تسهيل التخصيص عبر أنماط ألوان متعددة مثل الفاتح والداكن.

• إضافة متغيرات إضافية للتنبيهات، و .btn-close، و .offcanvas.

• عاد المتغير --bs-heading-color مع تحديث ودعم للوضع الداكن. أولاً، نقوم الآن بفحص قيمة null في متغير Sass المرتبط، $headings-color، قبل محاولة إخراج متغير CSS، لذا فهو افتراضياً غير موجود في ملف CSS المجمّع. ثانياً، نستخدم متغير CSS مع قيمة احتياطية، inherit، مما يسمح باستمرار السلوك الأصلي، ولكن يسمح أيضاً بالتجاوزات.

• تحويل الروابط لاستخدام متغيرات CSS لتنسيق color، ولكن ليس text-decoration. يتم الآن تعيين الألوان باستخدام --bs-link-color-rgb و --bs-link-opacity كـ (لون) rgba()، مما يتيح لك تخصيص الشفافية بسهولة. تقوم الفئة الزائفة a:hover الآن بتجاوز --bs-link-color-rgb بدلاً من تعيين خاصية color بشكل صريح.

• يتم الآن استخدام --bs-border-width في المزيد من المكونات لمزيد من التحكم في التنسيق العالمي الافتراضي.

• إضافة متغيرات CSS جذرية جديدة لظلال الصناديق box-shadow الخاصة بنا، بما في ذلك --bs-box-shadow و --bs-box-shadow-sm و --bs-box-shadow-lg و --bs-box-shadow-inset.

العناصر (Components)

التنبيهات (Alert)

• يتم الآن تصميم متغيرات التنبيه عبر متغيرات CSS.

• مستبعد المزج alert-variant() مستبعد الآن. نحن الآن نستخدم حلقة (loop) Sass مباشرةً لتعديل متغيرات CSS الافتراضية للمكون لكل متغير.

قائمة مجمعة (List group)

• يتم الآن تنسيق متغيرات عناصر القائمة المجمعة عبر متغيرات CSS.

• مستبعد المزج list-group-item-variant() مستبعد الآن. نحن الآن نستخدم حلقة (loop) Sass مباشرةً لتعديل متغيرات CSS الافتراضية للمكون لكل متغير.

القوائم المنسدلة (Dropdowns)

• مستبعد الفئة .dropdown-menu-dark مستبعدة وتم استبدالها بـ data-bs-theme="dark" على القائمة المنسدلة أو أي عنصر أب. راجع المستندات للحصول على مثال.

زر الإغلاق (Close button)

• مستبعد الفئة .btn-close-white مستبعدة وتم استبدالها بـ data-bs-theme="dark" على زر الإغلاق أو أي عنصر أب. راجع المستندات للحصول على مثال.

شريط التنقل (Navbar)

• مستبعد الفئة .navbar-dark مستبعدة وتم استبدالها بـ data-bs-theme="dark" على شريط التنقل أو أي عنصر أب. راجع المستندات للحصول على أمثلة محدثة.

أشرطة التقدم (Progress bars)

لقد تم تحديث علامات التكوين (markup) الخاصة بـ أشرطة التقدم في الإصدار v5.3.0. وبسبب وضع role ومختلف سمات aria- على عنصر .progress-bar الداخلي، لم تكن بعض قارئات الشاشة تعلن عن أشرطة التقدم ذات القيمة صفر. الآن، أصبحت role="progressbar" وسمات aria-* ذات الصلة موجودة على عنصر .progress الخارجي، مما يترك .progress-bar للعرض المرئي للشريط والتسمية الاختيارية فقط.

بينما نوصي باعتماد علامات التكوين الجديدة لتحسين التوافق مع جميع قارئات الشاشة، يرجى ملاحظة أن بنية شريط التقدم القديمة ستستمر في العمل كما كانت من قبل.

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>

لقد قدمنا أيضاً فئة .progress-stacked جديدة لتغليف أشرطة تقدم متعددة بشكل أكثر منطقية في شريط تقدم مكدس واحد.

<!-- Previous markup -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- New markup -->
<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

النماذج (Forms)

• تم الآن تنسيق الفئة .form-control باستخدام متغيرات CSS لدعم أنماط الألوان. يتضمن ذلك إضافة متغيري CSS جذريين جديدين لخلفيات عناصر التحكم في النماذج الافتراضية والمعطلة.

• تم الآن بناء مكونات .form-check و .form-switch باستخدام متغيرات CSS لتعيين background-image. يختلف الاستخدام هنا عن المكونات الأخرى في أن حالات التركيز (focus) والنشاط (active) وما إلى ذلك لكل مكون لا يتم تعيينها على الفئة الأساسية، وبدلاً من ذلك، تقوم هذه الحالات بتجاوز متغير واحد (على سبيل المثال --bs-form-switch-bg).

• أصبحت تسميات النماذج العائمة (Floating form labels) الآن تمتلك background-color لإصلاح دعم عناصر <textarea>. تم إجراء تغييرات إضافية لدعم الحالات المعطلة (disabled states) والمزيد.

• تم إصلاح عرض مدخلات التاريخ والوقت في المتصفحات القائمة على WebKit.

الأدوات المساعدة (Utilities)

• مستبعد سيتم استبدال .text-muted بـ .text-body-secondary في الإصدار v6.

  مع إضافة ألوان ومتغيرات السمة الموسعة، تم استبعاد متغيرات وأداة .text-muted في الإصدار v5.3.0. كما تمت إعادة تعيين قيمتها الافتراضية إلى متغير CSS الجديد --bs-secondary-color لدعم أنماط الألوان بشكل أفضل. سيتم إزالتها في الإصدار v6.0.0.

• إضافة أدوات مساعدة جديدة .overflow-x و .overflow-y وعدة أدوات .object-fit-*. تُستخدم خاصية object-fit لتحديد كيفية تغيير حجم عنصر <img> أو <video> ليتناسب مع الحاوية الخاصة به، مما يمنحنا بديلاً متوافقاً مع الشاشات (Responsive) لاستخدام background-image لصورة ملء/ملاءمة قابلة لتغيير الحجم.

• إضافة أداة .fw-medium مساعدة جديدة.

• إضافة أدوات .z-* جديدة للطبقات (z-index).

• أدوات ظلال الصناديق (ومتغيرات Sass) تم تحديثها للوضع الداكن. وهي الآن تستخدم --bs-body-color-rgb لإنشاء قيم ألوان rgba()، مما يسمح لها بالتكيف بسهولة مع أنماط الألوان بناءً على لون المقدمة المحدد.

للحصول على قائمة كاملة بالتغييرات، راجع مشروع v5.3.0 على GitHub.

v5.2.0

تصميم محدث (Refreshed design)

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

المزيد من متغيرات CSS (More CSS variables)

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

سيكون استخدامنا لمتغيرات CSS غير مكتمل إلى حد ما حتى الإصدار Bootstrap 6. وبينما نود تنفيذ هذه المتغيرات بشكل كامل في جميع أنحاء المشروع، إلا أنها قد تؤدي إلى حدوث تغييرات جذرية (breaking changes). على سبيل المثال، فإن تعيين $alert-border-width: var(--bs-border-width) في كود المصدر الخاص بنا يؤدي إلى تعطل الـ Sass المحتمل في الكود الخاص بك إذا كنت تقوم بعملية $alert-border-width * 2 لسبب ما.

بناءً على ذلك، وحيثما كان ذلك ممكناً، سنستمر في التوجه نحو المزيد من متغيرات CSS، ولكن يرجى إدراك أن تنفيذنا قد يكون محدوداً قليلاً في الإصدار v5.

الجديد _maps.scss

قدم الإصدار Bootstrap v5.2.0 ملف Sass جديد باسم _maps.scss. يقوم هذا الملف بسحب عدة خرائط (maps) 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 المخصصة لـ Bootstrap الآن بهذا الشكل مع استيراد منفصل للخرائط.

  // 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

أدوات مساعدة جديدة (New utilities)

أدوات font-weight لتشمل .fw-semibold للخطوط شبه العريضة (semibold).

• توسيع أدوات border-radius لتشمل حجمين جديدين، .rounded-4 و .rounded-5 ، لتوفير المزيد من الخيارات.

تغييرات إضافية (Additional changes)

• تقديم خيار $enable-container-classes الجديد. — الآن عند اختيار تخطيط CSS Grid التجريبي، ستظل فئات .container-* يتم تجميعها، ما لم يتم تعيين هذا الخيار إلى false. كما تحتفظ الحاويات (Containers) الآن بقيم الفراغات الفاصلة (gutter) الخاصة بها.

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

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

• تمت إعادة كتابة Scrollspy لاستخدام Intersection Observer API، مما يعني أنك لم تعد بحاجة إلى أغلفة أب نسبية (relative parent wrappers)، وتم استبعاد تكوين offset، والمزيد. ابحث عن تطبيقات Scrollspy الخاصة بك لتكون أكثر دقة واتساقاً في تمييز التنقل.

• أصبحت Popovers و tooltips تستخدم الآن متغيرات 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 لقلب ترتيب التسميات وصناديق الاختيار/أزرار الراديو المرتبطة بها.

• إضافة دعم الأعمدة المخططة (striped columns) للجداول عبر الفئة الجديدة .table-striped-columns.

للحصول على قائمة كاملة بالتغييرات، راجع مشروع v5.2.0 على GitHub.

v5.1.0

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

• تحديث أشرطة التنقل (navbars) لدعم الـ offcanvas. — أضف أدراج offcanvas في أي شريط تنقل باستخدام فئات .navbar-expand-* المتوافقة مع الشاشات وبعض علامات التكوين (markup) الخاصة بالـ offcanvas.

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

• إضافة الـ Collapse plugin الآن تدعم الطي الأفقي. — أضف .collapse-horizontal إلى .collapse لطي العرض width بدلاً من الارتفاع height. تجنب إعادة رسم المتصفح (browser repainting) عن طريق تعيين min-height أو height.

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

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

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

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

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

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

v5.0.0

التبعيات (Dependencies)

• إلغاء دعم jQuery.
• الترقية من Popper v1.x إلى Popper v2.x.
• استبدال Libsass بـ Dart Sass كمترجم Sass الخاص بنا، نظراً لأن Libsass أصبح مستبعداً.
• الانتقال من Jekyll إلى Hugo لبناء المستندات الخاصة بنا.

دعم المتصفحات ( Browser support)

• إلغاء دعم Internet Explorer 10 و 11
• إلغاء دعم Microsoft Edge الإصدارات الأقل من 16 (Legacy Edge)
• إلغاء دعم Firefox الإصدارات الأقل من 60
• إلغاء دعم Safari الإصدارات الأقل من 12
• إلغاء دعم iOS Safari الإصدارات الأقل من 12
• إلغاء دعم Chrome الإصدارات الأقل من 60

تغييرات المستندات (Documentation changes)

• إعادة تصميم الصفحة الرئيسية، وتنسيق المستندات، والتذييل (footer).
• إضافة دليل Parcel الجديد.
• إضافة قسم التخصيص الجديد، ليحل محل صفحة الثيمات (Theming) في الإصدار v4، مع تفاصيل جديدة حول Sass، وخيارات التكوين العالمية، ومخططات الألوان، ومتغيرات CSS، والمزيد.
• إعادة تنظيم جميع مستندات النماذج في قسم النماذج الجديد، مع تقسيم المحتوى إلى صفحات أكثر تركيزاً.
• وبالمثل، تم تحديث قسم التخطيط (Layout)، لتفصيل محتوى الشبكة (grid) بشكل أكثر وضوحاً.
• تغيير اسم صفحة مكوّن “Navs” إلى "Navs & Tabs".
• تغيير اسم صفحة “Checks” إلى "Checks & radios".
• إعادة تصميم الـ navbar وإضافة subnav جديد لتسهيل التنقل داخل مواقعنا وإصدارات المستندات.
• إضافة اختصار لوحة مفاتيح جديد لحقل البحث: / + Ctrl.

الـ (Sass)

• لقد تخلينا عن عمليات دمج خرائط Sass الافتراضية لتسهيل إزالة القيم المكررة. ضع في اعتبارك أنه يجب عليك الآن تعريف جميع القيم في خرائط Sass مثل $theme-colors. اطلع على كيفية التعامل مع خرائط Sass.

• Breaking إعادة تسمية الدالة color-yiq() والمتغيرات المرتبطة بها إلى color-contrast() لأنها لم تعد مرتبطة بمساحة ألوان YIQ. راجع #30168.

  • تم تغيير اسم $yiq-contrasted-threshold إلى $min-contrast-ratio.
  • تم تغيير اسم $yiq-text-dark و $yiq-text-light على التوالي إلى $color-contrast-dark و $color-contrast-light.

• Breaking تغيرت معاملات مزجات (mixins) استعلامات الوسائط (Media query) لاتباع نهج أكثر منطقية.

  • تستخدم الدالة media-breakpoint-down() نقطة التوقف نفسها بدلاً من نقطة التوقف التالية (على سبيل المثال، media-breakpoint-down(lg) بدلاً من media-breakpoint-down(md) تستهدف منافذ العرض الأصغر من lg).
  • وبالمثل، يستخدم المعامل الثاني في media-breakpoint-between() أيضاً نقطة التوقف نفسها بدلاً من نقطة التوقف التالية (على سبيل المثال، media-breakpoint-between(sm, lg) بدلاً من media-breakpoint-between(sm, md) تستهدف منافذ العرض بين sm و lg).

• Breaking إزالة أنماط الطباعة ومتغير $enable-print-styles. لا تزال فئات عرض الطباعة موجودة. راجع #28339.

• Breaking تم الاستغناء عن الدوال color() و theme-color() و gray() لصالح المتغيرات. راجع #29083.

• Breaking إعادة تسمية الدالة theme-color-level() إلى color-level() وهي الآن تقبل أي لون تريده بدلاً من ألوان $theme-color فقط. راجع #29083 تنبيه: تم الاستغناء عن color-level() لاحقاً في الإصدار v5.0.0-alpha3.

• Breaking إعادة تسمية $enable-prefers-reduced-motion-media-query و $enable-pointer-cursor-for-buttons إلى $enable-reduced-motion و $enable-button-pointers للاختصار.

• Breaking إزالة المزج (mixin) bg-gradient-variant(). استخدم الفئة .bg-gradient لإضافة تدرجات إلى العناصر بدلاً من الفئات المولدة .bg-gradient-*.

• Breaking إزالة المزجات (mixins) التي تم استبعادها سابقاً:

  • 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()

• Breaking إعادة تسمية الدالة scale-color() إلى shift-color() لتجنب التعارض مع دالة تغيير حجم الألوان الخاصة بـ Sass.

• تسمح مزجات (mixins) box-shadow الآن بقيم null وتتجاهل none من المعاملات المتعددة. راجع #30394.

• أصبح للمزج (mixin) border-radius() الآن قيمة افتراضية.

نظام الألوان (Color system)

• تم إزالة نظام الألوان الذي كان يعمل مع color-level() و $theme-color-interval لصالح نظام ألوان جديد. تم استبدال جميع دوال lighten() و darken() في كود المصدر الخاص بنا بدوال tint-color() و shade-color(). ستقوم هذه الدوال بمزج اللون مع الأبيض أو الأسود بدلاً من تغيير درجة سطوعه بمقدار ثابت. ستقوم الدالة shift-color() إما بتفتيح اللون أو تظليله بناءً على ما إذا كان معامل الوزن موجباً أو سالباً. راجع #30622 لمزيد من التفاصيل.

• تمت إضافة تدرجات وظلال جديدة لكل لون، مما يوفر تسعة ألوان منفصلة لكل لون أساسي، كمتغيرات Sass جديدة.

• تحسين تباين الألوان. تم رفع نسبة تباين الألوان من 3:1 إلى 4.5:1 وتحديث الألوان الأزرق والأخضر والسيان والوردي لضمان تباين WCAG 2.2 AA. كما تم تغيير لون تباين الألوان لدينا من $gray-900 إلى $black.

• لدعم نظام الألوان الخاص بنا، أضفنا دوال tint-color() و shade-color() مخصصة جديدة لمزج ألواننا بشكل مناسب.

تحديثات الشبكة (Grid updates)

• نقطة توقف جديدة! تمت إضافة نقطة توقف xxl جديدة لـ 1400px وما فوق. لا توجد تغييرات في جميع نقاط التوقف الأخرى.

• تحسين الفراغات الفاصلة. يتم الآن تعيين الفراغات الفاصلة (Gutters) بوحدات rem وهي أضيق من الإصدار v4 (1.5rem أو حوالي 24px بدلاً من 30px). وهذا يجعل الفراغات الفاصلة لنظام الشبكة لدينا متوافقة مع أدوات التباعد المساعدة.

  • إضافة فئة فراغات فاصلة جديدة (.g-* و .gx-* و .gy-*) للتحكم في الفراغات الفاصلة الأفقية/الرأسية، والفراغات الفاصلة الأفقية، والفراغات الفاصلة الرأسية.
  • Breaking إعادة تسمية .no-gutters إلى .g-0 لتتوافق مع أدوات الفراغات الفاصلة المساعدة الجديدة.

• لم تعد الأعمدة تستخدم position: relative، لذا قد تضطر إلى إضافة .position-relative إلى بعض العناصر لاستعادة هذا السلوك.

• Breaking تم إسقاط العديد من فئات .order-* التي غالباً ما كانت غير مستخدمة. نحن الآن نوفر فقط من .order-0 إلى .order-5 بشكل افتراضي.

• Breaking تم إسقاط مكون .media حيث يمكن تكراره بسهولة باستخدام الأدوات المساعدة. راجع #28265 و صفحة أدوات المرونة (flex utilities) للحصول على مثال.

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

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

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

المحتوى، وإعادة التشغيل، إلخ (Content, Reboot, etc)

• RFS مفعل الآن بشكل افتراضي. العناوين التي تستخدم المزج font-size() ستقوم تلقائياً بتعديل font-size الخاص بها ليتناسب مع منفذ العرض (viewport). كانت هذه الميزة سابقاً اختيارية في الإصدار v4.

• Breaking قمنا بتطوير طباعة العرض (display typography) لاستبدال متغيرات $display-* بخريطة Sass باسم $display-font-sizes. كما قمنا بإزالة متغيرات $display-*-weight الفردية لصالح متغير واحد هو $display-font-weight وتعديل أحجام font-size.

• إضافة حجمين جديدين لعناوين .display-*، وهما .display-5 و .display-6.

• الروابط تحتها خط بشكل افتراضي (ليس فقط عند التمرير)، ما لم تكن جزءاً من مكونات محددة.

• إعادة تصميم الجداول لتحديث أنماطها وإعادة بنائها باستخدام متغيرات CSS لمزيد من التحكم في التنسيق.

• Breaking الجداول المتداخلة لم تعد ترث الأنماط بعد الآن.

• Breaking تم إسقاط .thead-light و .thead-dark لصالح فئات التنويعات .table-* التي يمكن استخدامها لجميع عناصر الجدول (thead و tbody و tfoot و tr و th و td).

• Breaking تم تغيير اسم المزج table-row-variant() إلى table-variant() وهو يقبل معاملين فقط: $color (اسم اللون) و $value (كود اللون). يتم حساب لون الحدود وألوان التأكيد تلقائياً بناءً على متغيرات عامل الجدول.

• تقسيم متغيرات الهامش الداخلي (padding) لخلايا الجدول إلى -y و -x.

• Breaking إسقاط الفئة .pre-scrollable. راجع #29135

• Breaking أدوات .text-* المساعدة لم تعد تضيف حالات التمرير (hover) والتركيز (focus) إلى الروابط بعد الآن. يمكن استخدام فئات المساعدين .link-* بدلاً من ذلك. راجع #29267

• Breaking إسقاط الفئة .text-justify. راجع #29793

• Breaking عناصر <hr> تستخدم الآن height بدلاً من border لدعم سمة size بشكل أفضل. هذا يتيح أيضاً استخدام أدوات الهامش الداخلي (padding) لإنشاء فواصل أكثر سمكاً (على سبيل المثال، <hr class="py-1">).

• إعادة تعيين padding-left الأفقي الافتراضي على عناصر <ul> و <ol> من القيمة الافتراضية للمتصفح 40px إلى 2rem.

• إضافة $enable-smooth-scroll، والذي يطبق scroll-behavior: smooth عالمياً—باستثناء المستخدمين الذين يطلبون تقليل الحركة من خلال استعلام وسائط prefers-reduced-motion. راجع #31877

الإتجاه (RTL)

• تم تغيير أسماء جميع المتغيرات والأدوات (utilities) والـ mixins المتعلقة بالاتجاه الأفقي لتستخدم الخصائص المنطقية (logical properties) مثل تلك الموجودة في تخطيطات flexbox — على سبيل المثال، استخدام start و end بدلاً من left و right.

النماذج (Forms)

• إضافة نماذج عائمة (floating forms) جديدة! لقد قمنا بترقية مثال التسميات العائمة (Floating labels) إلى مكوّنات نماذج مدعومة بالكامل. راجع صفحة Floating labels الجديدة.

• Breaking تم دمج عناصر النماذج الأصلية والمخصصة. تم دمج صناديق الاختيار (Checkboxes)، وأزرار الراديو (radios)، والقوائم المنسدلة (selects)، وغيرها من المدخلات التي كانت تمتلك فئات أصلية ومخصصة في الإصدار v4. الآن أصبحت جميع عناصر النماذج لدينا مخصصة بالكامل تقريباً، ومعظمها لا يحتاج إلى HTML مخصص.

  • .custom-control.custom-checkbox أصبحت الآن .form-check.
  • .custom-control.custom-radio أصبحت الآن .form-check.
  • .custom-control.custom-switch أصبحت الآن .form-check.form-switch.
  • .custom-select أصبحت الآن .form-select.
  • تم استبدال .custom-file و .form-control-file بأنماط مخصصة فوق .form-control.
  • .custom-range أصبحت الآن .form-range.
  • تم إسقاط .form-control-file و .form-control-range الأصلية.

• Breaking تم إسقاط .input-group-append و .input-group-prepend. يمكنك الآن ببساطة إضافة الأزرار و .input-group-text كأبناء مباشرين لمجموعات المدخلات.

• تم أخيراً إصلاح مشكلة فقدان تدوير الحواف في مجموعة المدخلات مع تعليقات التحقق من الصحة عن طريق إضافة فئة .has-validation إضافية إلى مجموعات المدخلات التي تحتوي على تحقق من الصحة.

• Breaking تم إسقاط فئات التخطيط الخاصة بالنماذج لنظام الشبكة الخاص بنا. استخدم الشبكة والأدوات المساعدة بدلاً من .form-group أو .form-row أو .form-inline.

• Breaking تسميات النماذج تتطلب الآن .form-label.

• Breaking .form-text لم تعد تحدد display، مما يسمح لك بإنشاء نص مساعدة مضمن أو كتلة كما تشاء فقط عن طريق تغيير عنصر HTML.

• لم تعد عناصر التحكم في النماذج تستخدم height ثابتاً عندما يكون ذلك ممكناً، وبدلاً من ذلك تعتمد على min-height لتحسين التخصيص والتوافق مع المكونات الأخرى.

• لم تعد أيقونات التحقق من الصحة تُطبق على عناصر <select> التي تحتوي على multiple.

• إعادة ترتيب ملفات Sass المصدرية تحت scss/forms/، بما في ذلك أنماط مجموعة المدخلات.

المكونات (Components)

• تم توحيد قيم padding للتنبيهات، ومسارات التصفح (breadcrumbs)، والبطاقات، والقوائم المنسدلة، والقوائم المجمعة، والنوافذ المنبثقة (modals)، والـ popovers، وتلميحات الأدوات (tooltips) لتعتمد على متغير $spacer الخاص بنا. راجع #30564.

القوائم المطوية (Accordion)

• إضافة مكون القوائم المطوية الجديد.

التنبيهات (Alerts)

• تحتوي التنبيهات الآن على أمثلة مع أيقونات.

• تمت إزالة الأنماط المخصصة لعناصر <hr> في كل تنبيه لأنها تستخدم بالفعل currentColor.

الشارات (Badges)

• Breaking تم إسقاط جميع فئات الألوان .badge-* لصالح أدوات الخلفية المساعدة (على سبيل المثال، استخدم .bg-primary بدلاً من .badge-primary).

• Breaking تم إسقاط .badge-pill—استخدم أداة .rounded-pill المساعدة بدلاً من ذلك.

• Breaking تمت إزالة أنماط التمرير (hover) والتركيز (focus) لعناصر <a> و <button>.

• زيادة الهامش الداخلي (padding) الافتراضي للشارات من .25em/.5em إلى .35em/.65em.

مسارات التصفح (Breadcrumbs)

• تم تبسيط المظهر الافتراضي لمسارات التصفح عن طريق إزالة padding و background-color و border-radius.

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

الأزرار (Buttons)

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

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

• تحديث المزجات (mixins) الخاصة بنا button-variant() و button-outline-variant() لدعم معاملات إضافية.

• تحديث الأزرار لضمان زيادة التباين عند التمرير (hover) وحالات النشاط (active).

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

البطاقات (Card)

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

• Breaking تم إسقاط .card-columns لصالح Masonry. راجع #28922.

• Breaking تم استبدال القوائم المطوية (accordion) القائمة على .card بـ مكون القوائم المطوية (Accordion) الجديدة.

العرض التفاعلي (Carousel)

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

• استبدال أيقونات chevron لعناصر تحكم Carousel بـ SVGs جديدة من أيقونات الـ (Bootstrap).

زر الإغلاق (Close button)

• Breaking تم تغيير اسم .close إلى .btn-close ليكون اسماً أقل عمومية.

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

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

الطي (Collapse)

• إزالة تثبيت التمرير (scroll anchoring) للقوائم المطوية (accordions).

القوائم المنسدلة (Dropdowns)

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

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

• تظليل فاصل القائمة المنسدلة لتحسين التباين.

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

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

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

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

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

صندوق العرض البارز (Jumbotron)

• Breaking تم إسقاط مكون jumbotron حيث يمكن تكراره باستخدام الأدوات المساعدة. راجع مثال Jumbotron الجديد لدينا للعرض.

قائمة مجمعة (List group)

• إضافة معدل .list-group-numbered جديد للقوائم المجمعة.

التنقل والتبويبات (Navs و tabs)

• إضافة متغيرات null جديدة لـ font-size و font-weight و color و color عند التمرير :hover للفئة .nav-link.

أشرطة التنقل (Navbars)

• Breaking تتطلب أشرطة التنقل الآن حاوية (container) بداخلها (لتبسيط متطلبات التباعد و CSS المطلوب بشكل كبير).
• Breaking لم يعد من الممكن تطبيق الفئة .active على عناصر .nav-item، بل يجب تطبيقها مباشرة على عناصر .nav-link.

اللوحة الجانبية (Offcanvas)

• إضافة مكون offcanvas الجديد.

الترقيم (Pagination)

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

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

التلميحات (Popovers)

• Breaking تم تغيير اسم .arrow إلى .popover-arrow في قالب التلميحات الافتراضي لدينا.

• تم تغيير اسم خيار whiteList إلى allowList.

مؤشرات التحميل (Spinners)

• أصبحت مؤشرات التحميل (Spinners) الآن تحترم prefers-reduced-motion: reduce عن طريق إبطاء الرسوم المتحركة. راجع #31882.

• تحسين المحاذاة الرأسية لمؤشرات التحميل.

الإشعارات (Toasts)

• يمكن الآن تحديد موقع الـ Toasts في .toast-container بمساعدة أدوات تحديد الموقع المساعدة.

• تغيير مدة الـ toast الافتراضية إلى 5 ثوانٍ.

• إزالة overflow: hidden من الـ toasts واستبدالها بـ border-radius مناسبة باستخدام دالات calc().

تلمحات الأدوات (Tooltips)

• Breaking تم تغيير اسم .arrow إلى .tooltip-arrow في قالب تلميحات الأدوات الافتراضي لدينا.

• Breaking تم تغيير القيمة الافتراضية لـ fallbackPlacements إلى ['top', 'right', 'bottom', 'left'] لتحسين تحديد موقع عناصر popper.

• Breaking تم تغيير اسم خيار whiteList إلى allowList.

الأدوات المساعدة (Utilities)

• Breaking تمت إعادة تسمية العديد من الأدوات المساعدة لاستخدام أسماء الخصائص المنطقية بدلاً من الأسماء الاتجاهية مع إضافة دعم RTL:

  • تمت إعادة تسمية .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.

• Breaking تم تعطيل الهوامش السالبة افتراضياً.

• إضافة فئة .bg-body جديدة لتعيين خلفية الـ <body> بسرعة لعناصر إضافية.

• إضافة أدوات تحديد الموقع المساعدة جديدة لـ top و right و bottom و left. تتضمن القيم 0 و 50% و 100% لكل خاصية.

• إضافة أدوات .translate-middle-x و .translate-middle-y جديدة لتوسيط العناصر ذات الموقع المطلق/الثابت أفقياً أو رأسياً.

• إضافة أدوات border-width المساعدة جديدة.

• Breaking تمت إعادة تسمية .text-monospace إلى .font-monospace.

• Breaking تمت إزالة .text-hide لأنها طريقة قديمة لإخفاء النصوص ولا ينبغي استخدامها بعد الآن.

• إضافة أدوات .fs-* المساعدة لأدوات font-size (مع تفعيل RFS). تستخدم هذه نفس مقياس عناوين HTML الافتراضية (1-6، من الكبير إلى الصغير)، ويمكن تعديلها عبر خريطة (map) Sass.

• Breaking تمت إعادة تسمية أدوات .font-weight-* المساعدة إلى .fw-* من أجل الاختصار والاتساق.

• Breaking تمت إعادة تسمية أداة .font-italic المساعدة إلى .fst-italic من أجل الاختصار والاتساق مع أداة .fst-normal الجديدة.

• إضافة .d-grid إلى أدوات العرض المساعدة وأدوات gap جديدة (.gap) لتخطيطات CSS Grid و flexbox.

• Breaking تمت إزالة .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.

المساعدات (Helpers)

• Breaking تمت إعادة تسمية مساعدي التضمين المتوافق مع الشاشات (Responsive embed helpers) إلى مساعدي النسبة (ratio helpers) مع أسماء فئات جديدة وسلوكيات محسنة، بالإضافة إلى متغير CSS مفيد.

  • تمت إعادة تسمية الفئات لتغيير by إلى x في نسبة العرض إلى الارتفاع. على سبيل المثال، .ratio-16by9 أصبحت الآن .ratio-16x9.
  • لقد تخلينا عن .embed-responsive-item ومحدد مجموعة العناصر لصالح محدد .ratio > * أبسط. لم تعد هناك حاجة لفئة إضافية، وأصبح مساعد النسبة الآن يعمل مع أي عنصر HTML.
  • تمت إعادة تسمية خريطة (map) Sass المسماة $embed-responsive-aspect-ratios إلى $aspect-ratios وتم تبسيط قيمها لتشمل اسم الفئة والنسبة المئوية كزوج key: value.
  • يتم الآن إنشاء متغيرات CSS وتضمينها لكل قيمة في خريطة Sass. قم بتعديل متغير --bs-aspect-ratio على .ratio لإنشاء أي نسبة عرض إلى ارتفاع مخصصة.

• Breaking فئات "قارئ الشاشة" (Screen reader) أصبحت الآن "فئات مخفية بصرياً" (visually hidden classes).

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

• يتضمن ملف bootstrap-utilities.css الآن أيضاً المساعدين الخاصين بنا. لم تعد هناك حاجة لاستيراد المساعدين في عمليات البناء المخصصة بعد الآن.

الـ (JavaScript)

• إلغاء الاعتماد على jQuery وإعادة كتابة الإضافات (plugins) لتكون بلغة JavaScript عادية.

• تغيير جذري أصبحت سمات البيانات (Data attributes) لجميع إضافات JavaScript الآن ذات نطاق محدد (namespaced) للمساعدة في تمييز وظائف الـ Bootstrap عن الأطراف الثالثة وكودك الخاص. على سبيل المثال، نستخدم data-bs-toggle بدلاً من data-toggle.

• يمكن لجميع الإضافات (plugins) الآن قبول CSS selector كأول argument. يمكنك تمرير عنصر DOM أو أي CSS selector صالح لإنشاء نسخة (instance) جديدة من الإضافة:

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

• يمكن تمرير popperConfig كدالة تقبل تكوين Popper الافتراضي الخاص بـ Bootstrap كمعامل (argument)، بحيث يمكنك دمج هذا التكوين الافتراضي بطريقتك الخاصة. ينطبق هذا على القوائم المنسدلة (dropdowns)، والتلميحات (popovers)، وتلميحات الأدوات (tooltips).

• تم تغيير القيمة الافتراضية لـ fallbackPlacements إلى ['top', 'right', 'bottom', 'left'] لتحسين تحديد موقع عناصر Popper. ينطبق هذا على القوائم المنسدلة (dropdowns)، والتلميحات (popovers)، وتلميحات الأدوات (tooltips).

• تمت إزالة الشرطة السفلية من الدوال الساكنة العامة (public static methods) مثل _getInstance() ← getInstance().

• تمت إزالة ملف util.js، حيث تم دمج وظائفه الآن في الإضافات (plugins) الفردية. إذا كنت قد قمت بتضمين util.js يدوياً في السابق، يمكنك إزالته بأمان، حيث لم يعد مطلوباً. تحتوي كل إضافة الآن فقط على الأدوات المساعدة التي تحتاجها، مما يعزز الوحدوية ويقلل التبعيات.