ما الجديد في Bootstrap 5

تعد Bootstrap إحدى أكثر مكتبات CSS شعبية. تسمح للمطورين باستخدام أنماط ومكونات جميلة بسهولة وإنشاء مواقع تصميمية مرنة. استخدام Bootstrap يمكن أن يوفر للمطورين الوقت، وخاصة مع المكونات التي تستخدم في معظم المشاريع.

تأتي Bootstrap 5 (الإصدار الرئيسي الحالي، الصادر في مايو 2021) معها الكثير من التغييرات والتحسينات، بما في ذلك إضافة مكونات جديدة، فئات جديدة، تصاميم جديدة للمكونات القديمة، دعم متصفحات جديد، إزالة بعض المكونات القديمة، وأكثر من ذلك.

في هذا المقال، سنغطي ما تغير في Bootstrap 5، ما تم التخلص منه، و، الأكثر إثارة للحماس، ما هو جديد.

متى يفضل استخدام Bootstrap (ومتى لا)

تعتبر Bootstrap “أكثر إطار عالمي لبناء مواقع مرنة ومواقع يدوية الاستخدام”، ومع 152 ألف نجمة على GitHub، لا أعتقد أن هذا الادعاء بعيد المدى. خاصة بالنسبة للمبتدئين، فإن Bootstrap هو طريقة رائعة لبدء إنشاء مواقع حديثة ونظيفة. يسهل تحقيق تصاميم معقدة، يدوية الاستخدام ويوفر العديد من المكونات التي من المحتمل أن تحتاجها في مشاريع متعددة.

تتمتع Bootstrap بمنحدر تعلم منخفض وتناسبها جيدًا للمواقع الساكنة التي لا تتطلب خطوة بناء، حيث يمكنك فقط الإشارة إلى المكتبة من CDN لـ Bootstrap. وهذا يختلف عن بعض الإطارات الشهيرة الأخرى لـ CSS التي قد تكون محسنة للاستخدام مع مترجم أو مشغل مهمة.

يجب أن تكون على علم أيضًا ، مع ذلك ، أن Bootstrap ليس حلّاً عميقًا. بالنسبة للجدد ، يجعل Bootstrap توليد ترميز ضعيف ومعقد بسهولة. إنها أيضًا مكتبة كبيرة نسبيًا من حيث الكيلوبايت (على الرغم من تحسن هذا مع كل إصدار) ، لذا قد لا تكون الخيار الأفضل إذا كنت تستخدم واحدة أو اثنتين فقط من ميزاتها. كما هو الحال مع أي تجريد ، ستساعدك الكثير إذا كان لديك فهم جيد للتكنولوجيا الأساسية ويمكنك اتخاذ قرار مستنير بشأن موعد استخدامه.

ترقية من Bootstrap 4 إلى 5

الترقية من Bootstrap 4 إلى 5 عمومًا سهلة للغاية. معظم المكونات وفئاتها وفئات المساعدة التي كانت متاحة في Bootstrap 4 لا تزال متاحة في Bootstrap 5. الشيء الرئيسي الذي يجب أن تركز عليه عند الترقية هو ما إذا كانت الفئات أو المكونات التي تستخدمها تم التخلص منها. إذا تم التخلص منها ، هناك بدائل أو طرق لتحقيق نفس النتيجة باستخدام فئات المساعدة. الشيء الثاني الذي يجب أن تركز عليه هو التبديل من data-* السمات إلى data-bs-* في المكونات التي تتطلب الجافا سكريبت كجزء من وظائفها. (سنغطي هذا بشيء أكثر في القسم التالي.)

إذا كنت تستخدم ملفات Sass لـ Bootstrap ، فهناك بعض المتغيرات والميكانيكات التي تم تغيير اسمها. Bootstrap 5 لديها قسم شامل ومفصل حول التخصيص ، بالإضافة إلى تفاصيل حول متغيرات Sass وميكانيكات لكل مكون في صفحات الوثائق الخاصة بهم.

ما الذي تغير

إصدار Bootstrap 5 يجلب تغييرات أساسية لـ Bootstrap كمكتبة، مع تغيير في التبعيات المطلوبة، ودعم المتصفحات وأكثر من ذلك. كما أنه يجلب تغيرات في المكونات والفئات التي اعتدنا عليها في الإصدارات السابقة.

لم تعد jQuery تبعية

كتغيير رئيسي عن الإصدارات السابقة، لم تعد jQuery تبعية لـ Bootstrap. الآن، يمكنك استخدام Bootstrap في كامل جدارته بدونها، لكنك لا تزال بحاجة إلى Popper.js. هذا التغيير يجعل استخدام Bootstrap أسهل في المشاريع التي لا تتطلب أو تستخدم jQuery، مثلما هو الحال عند استخدام Bootstrap مع React.

لا يزال بإمكانك استخدام jQuery مع Bootstrap إذا كانت جزءًا من موقعك. إذا اكتشف Bootstrap وجود jQuery في كائن window، سيقوم تلقائيًّا بإضافة جميع المكونات إلى نظام البروتوكولات الخاص بـ jQuery. لذا، إذا كنت تنتقل من v4 إلى v5، لست بحاجة للقلق بشأن هذا التغيير، ولا يزال بإمكانك استخدام jQuery مع Bootstrap عند الضرورة.

ولكن ماذا لو كنت تستخدم jQuery في موقعك، ولكنك لا تريد استخدام jQuery من قبل Bootstrap؟ يمكنك القيام بذلك عن طريق إضافة السمة data-bs-no-jquery إلى عنصر الجسم في المستند:

<body data-bs-no-jquery="true">
</body>

كيف يعمل Bootstrap بدون jQuery؟ على سبيل المثال، في v4 كنت تستخدم الكود التالي في JavaScript لإنشاء عنصر Toast:

$('.toast').toast()

في Bootstrap 5، يمكنك استخدام نفس الكود لإنشاء عنصر Toast إذا كان موقعك يستخدم بالفعل jQuery. بدون jQuery، ستحتاج إلى استخدام شيء مثل الكود التالي لإنشاء عنصر Toast:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

يستخدم هذا ببساطة فقط JavaScript فيبياني لاستعلام المستند عن العناصر التي تحمل فئة .toast، ثم يبدأ في تهيئة مكون Toast على العنصر باستخدام new bootstrap.Toast().

تغيير في دعم المتصفح

حتى الإصدار 4، كانت بوترستراب تدعم Internet Explorer (IE) 10 و 11. ومع بداية بوترستراب 5، تم التخلص تمامًا من دعم IE. لذا، إذا كنت بحاجة إلى دعم IE في موقعك الإلكتروني، ربما يجب أن تكون حذرًا عند الترقية إلى الإصدار 5.

تغيرات أخرى في دعم المتصفح تشمل:

دعم Firefox و Chrome الآن بدءًا من الإصدار 60
دعم Safari و iOS الآن بدءًا من الإصدار 12
دعم Android Browser و WebView الآن بدءًا من الإصدار 6

تغيير في سمات البيانات

غيرت بوترستراب 5 تسمية سمات البيانات التي تستخدم بشكل عام من قبل مكوناتها التي تستخدم JavaScript كجزء من وظائفها. في السابق، كانت معظم المكونات التي تعتمد على بعض وظائف JavaScript تمتلك سمات بيانات تبدأ بـ data-. على سبيل المثال، لإنشاء مكون Tooltip في بوترستراب 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

لاحظ استخدام data-toggle و data-placement. في بوترستراب 5، تبدأ سمات البيانات لهذه المكونات الآن بـ data-bs لتسهيل تسمية سمات بوترستراب. على سبيل المثال، لإنشاء مكون Tooltip في بوترستراب 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

بدلاً من استخدام data-toggle و data-placement، نستخدم data-bs-toggle و data-bs-placement. إذا كنت تستخدم JavaScript لإنشاء مكونات في Bootstrap، فمن المحتمل ألا تحتاج إلى إجراء أي تغييرات. ومع ذلك، إذا كانت مكوناتك تعتمد فقط على سمات البيانات للعمل، فأنت بحاجة إلى تغيير جميع سمات البيانات التي تبدأ بـ data لتبدأ بـ data-bs.

إصلاح البقـ

في وثائق Bootstrap 4 تحت المتصفحات والأجهزة، هناك قائمة بالبقايا التي تحدث على بعض المتصفحات. لم تعد هذه البقايا مدرجة في نفس القائمة في Bootstrap 5. تشمل القائمة ما يلي:

تطبيق تصيير التحول على العناصر في أحداث اللمس على iOS، وهو ما لم يكن مرغوبًا لأنه كان يعتبر سلوكًا غير متوقع.
استخدام .container في Safari 8 وما فوق سبب حجم صغير للخط عند الطباعة.
تغيير دائرة نصف قطر الجوانب بواسطة التغذية الصحية (ولكن يمكن إصلاحها عن طريق إضافة فئة إضافية .has-validation).

قائمة البقايا والمشاكل في وثائق Bootstrap 4 تصف أيضًا البقايا التي حدثت على إصدارات المتصفحات التي لم تعد مدعومة.

تغييرات أخرى

هناك العديد من التغييرات الأخرى التي إما أنها طفيفة أو لا تسبب تغييرًا جذريًا واضحًا. تشمل هذه التغييرات:

تستخدم Bootstrap 5 الآن Popper v2. تأكد من ترقية إصدار Popper الخاص بك. Popper v1 لن يعمل بعد الآن، حيث يتطلب Bootstrap 5 @popperjs/core بدلاً من popper.js السابق.
يمكن استخدام Bootstrap 5 الآن كوحدة في المتصفح باستخدام إصدار من Bootstrap بني كوحدة ECMAScript.
منذ Libsass و Node Sass (التي كانت تستخدم في Bootstrap 4) الآن مهجورة، يستخدم Bootstrap 5 Dart Sass لتجميع ملفات Sass المصدر إلى CSS.
كان هناك تغيير في بعض قيم متغيرات Sass، مثل $zindex-modal الذي تغير من 1050 إلى 1060، $zindex-popover من 1060 إلى 1070، وأكثر من ذلك. لهذا السبب، يوصى بفحص متغيرات Sass لكل مكون أو فئات المساعدة في وثائق Bootstrap 5.
في السابق، لجعل عنصر مخفيًا ولكن تبقيه قابلاً للاستعراض لأجهزة المساعدة المتعلقة بالتصفح، كانت تستخدم الفئة .sr-only. تم استبدال هذه الفئة الآن بـ .visually-hidden.
في السابق، لجعل عنصر تفاعلي مخفيًا ولكنه لا يزال قابلاً للاكتشاف من قبل التقنيات المساعدة، كان عليك استخدام كلا من صفات .sr-only و.sr-only-focusable. في Bootstrap 5، كل ما تحتاجه هو استخدام .visually-hidden-focusable دون .visually-hidden.
أصبحت الاقتباسات التي لها مصدر ذكري مغلفة بعنصر <figure>.

إليك مثالًا على كيفية تصرف الاقتباسات في Bootstrap 5:
في الإصدارات السابقة، كانت أنماط الجداول مُرثَّة. وهذا يعني أنه إذا تمَّ دمج جدول داخل جدول آخر، فإن الجدول المتبقي سيرث أنماط الجدول الأب. في Bootstrap 5، تكون أنماط الجداول مستقلة عن بعضها البعض حتى لو كانت مُدمجة.
أدوات الحدود الآن تدعم الجداول. وهذا يعني أنه يمكنك الآن تغيير لون حدود الجدول باستخدام أدوات لون الحدود.

إليكم مثالًا على استخدام أدوات الحدود مع الجداول في Bootstrap 5:
تم تغيير تصميم الخبرات المسطحة بشكل افتراضي، حيث تمت إزالة الخلفية الرمادية الافتراضية، والتباعد ونصف قطر الحد الذي كان في الإصدارات السابقة.

هنا مثال على أسلوب Breadcrumbs في Bootstrap 5:
تم تغيير تسمية الفئات التي استخدمت left و right للإشارة إلى الموضع لاستخدام start و end. على سبيل المثال، .dropleft و .dropright في القوالب المنسدلة تم استبدالها بـ .dropstart و .dropend على التوالي.
كما هو الحال مع النقطة السابقة، تم تغيير فئات الوسائل التي تستخدم l لـ left و r لـ right إلى استخدام s لـ start و e لـ end على التوالي. على سبيل المثال، .mr-* أصبح .me-*.
الفئة .form-control-range المستخدمة للمداخل النطاقية هي الآن .form-range.
تم تعيين الهوامش الآن بوحدة rems بدلاً من px السابقة.
.no-gutters تم تغيير اسمها إلى .g-0 في سياق إضافة فئات الهوامش الجديدة (المزيد عن ذلك في الأقسام اللاحقة).
تحتهاب الروابط الآن افتراضيًا حتى عندما لا يتم تحديدها.
تغيرت أسماء فئات عناصر النموذج المخصصة من .custom-* لتكون جزءًا من فئات مكونات النموذج. على سبيل المثال، .custom-check تم استبداله بـ .form-check، و .custom-select تم استبداله بـ .form-select، وهكذا.
إضافة .form-label إلى التسميات الآن إلزامية.
التنبيهات، الخبز المخبوز، البطاقات، القوالب المنسدلة، مجموعات القوالب، الوحدات النمطية، المفاجآت، والقفص العلوي الآن يستخدمون نفس قيم الهواء باستخدام متغير $spacer.
تم تغيير الهواء الافتراضي في عناصر الشارة الآن من .25em/.5em إلى .35em/.65em.
تستخدم الأغطية للأزرار المفتاحية مع صناديق الاختيار والأزرار الراديوية. كما تم تبسيط الترميز أيضًا. في Bootstrap 4، تم تحقيق زر مفتاحي فحص باستخدام الترميز التالي:
```
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> تحقق
  </label>
</div>
```
في Bootstrap 5، يمكن القيام بذلك بطريقة أبسط:
```
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">تحقق</label>
```
الحالات active و hover للأزرار قد زادت التباين الآن في اللون.
أيقونات Carousel chevron الآن تستخدم SVG من Bootstrap Icons.
أصبحت فئة الزر القرمزي الآن مُعرَّفة من .close إلى .btn-close، وتستخدم أيقونة SVG بدلاً من ×.
أصبحت فاصلات Dropdown الآن أكثر قتامة لتحسين التباين.

تنصيب المحتوى يجب الآن أن يُحاط داخل عنصر منطقة محتوى. على سبيل المثال في Bootstrap 4:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">تنصيب</a>
  ...
</nav>

يصبح في Bootstrap 5:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">تنصيب</a>
    ...
  </div>
</nav>

تم استبدال فئة .arrow في مكونات النصائح بـ .popover-arrow، وتم استبدال فئة .arrow في مكونات الأدوات المساعدة بـ .tooltip-arrow.
تم تغيير خيار whiteList في النصائح إلى allowList.
تم تغيير مدة الافتتاح الافتراضية لـ التلميحات إلى 5 ثوان.
قد تم تغيير القيمة الافتراضية لـ fallbackPlacements في مكونات tooltip، dropdown و popover إلى المصفوفة ['top', 'right', 'bottom', 'left'].
.text-monospace تم تغيير اسمها إلى .font-monospace.
.font-weight-* تم تغيير اسمها إلى .fw-* و .font-style-* إلى .fst-*.
.rounded-sm و .rounded-lg تم استبدالهما الآن بنطاق من فئات التقوير .rounded-* من 0 إلى 3.

ما تم التخلص منه

يمكن أن تأتي التغييرات بتكلفة. مع ظهور نسخة جديدة تجلب تغييرات وتحسينات، يتم أيضًا التخلص من بعض الميزات القديمة التي كانت تدعمها سابقًا. مع هذا الإصدار الجديد، تم التخلص من بعض مكونات Bootstrap، فئات المساعدة أو الميزات الأخرى.

معظم العناصر التي تم إسقاطها من Bootstrap 5 تم إسقاطها لأنه يمكن تحقيق الشيء نفسه عن طريق استخدام فئات الوظائف بدلاً من جعلها مكونًا مستقلًا. أيضًا ، بعض العناصر التي تم إسقاطها كانت قد ثبت أنها غير مستخدمة أو غير ضرورية.

فيما يلي قائمة بما تم إسقاطه من Bootstrap 5:

كما ذكر في القسم السابق ، تم إلغاء دعم IE تمامًا.
فئات لون الشارات (على سبيل المثال ، .badge-primary) تم إسقاطها لصالح استخدام فئات الوظائف اللونية (على سبيل المثال ، .bg-primary).
فئة .badge-pill الشارة ، التي منحت الشارة نمط الحبة ، تم إسقاطها لصالح استخدام .rounded-pill ، والذي يحقق نفس النتيجة.
تمت إزالة فئة الزر .btn-block ، حيث يمكن تحقيق نفس النتيجة باستخدام فئات العرض المساعد مثل .d-block.
تم التخلص من تنسيق بطاقات .card-columns Masonry الذي كان متاحًا سابقًا ، حيث كان له العديد من الآثار الجانبية.
تمت إزالة الخيار flip للمكونات المنخفضة ، لصالح الإعدادات الخاصة بـ Popper.
تم التخلص من مكون Jumbotron ، حيث يمكن تحقيق نفس النتيجة باستخدام فئات المساعدة.
تم التخلص من بعض فئات أوامر الاستخدام (.order-*)، حيث كانت تتراوح سابقاً من 1 إلى 12. الآن تتراوح من 1 إلى 5.
تم التخلص من مكون الوسائط، حيث يمكن تحقيق نفس النتيجة باستخدام فئات الاستخدام.
تم التخلص من فئات .thead-light و.thead-dark، حيث يمكن تطبيق فئات التحول .table-* على جميع عناصر الجدول.
تم التخلص من فئة .pre-scrollable، حيث لا تستخدم كثيرًا.
تم التخلص من فئة .text-justify بسبب قضايا الاستجابة اللازمة، كما تم التخلص من فئة .text-hide لأن طريقتها قديمة ولا يجب استخدامها. ولم تعد فئات .text-* تضيف حالات التحول أو التركيز إلى الروابط بعد الآن. يجب استبدال هذه الفئات .text-* بفئات .link-*.
لا يلزم استخدام .input-group-append و.input-group-prepend بالإضافة إلى مجموعات الإدخال التي تحتوي على عدة مدخلات أو مكونات. يمكن إضافة العناصر التي يجب أن تكون في المجموعة مباشرة كأطفال لفئة .input-group.

فيما يلي مثال على استخدام مجموعات الإدخال مع عدة مدخلات:
.form-group، .form-row، و .form-inline تم التخلص منها على حساب فئات التخطيط.
.form-text لم تعد لديها خاصية display محددة. عرض العنصر سيعتمد على ما إذا كان العنصر نفسه عنصرًا كتليًا أو خطيًا.
تمت إزالة أيقونات التحقق من صحة لعناصر <select> مع multiple.
تمت إزالة فئة .card-deck على حساب فئات الشبكة.
تم تعطيل الهوامش السالبة بشكل افتراضي.
.embed-responsive-item تمت إزالة العناصر على حساب تطبيق التصميم على جميع أطفال النسب، والذي كان سابقًا إدراجات تستجيب للأبعاد (المزيد عن ذلك في القسم التالي).

ما الجديد

أخيرًا، تجلب بوتسطراب الكثير من الإضافات المثيرة للغاية إلى مكتبتها في الإصدار 5. تشمل بعض هذه التغييرات ميزات جديدة، ومفاهيم مدعومة جديدة، ومكونات جديدة، وفئات مساعدة جديدة وأكثر.

تم تمكين حجم الخط المتناسب مع الشاشة الآن افتراضيًا

حجم الخط المتناسب (RFS) كان في إصدارات بوتسطراب السابقة، لكنه كان معطلاً افتراضيًا. بوتسطراب 5 يمكن RFS افتراضيًا، مما يجعل الخطوط في بوتسطراب أكثر تناسقًا. RFS هو مشروع جانبي أنشأه بوتسطراب لأول مرة لقياس وتغيير حجم الخطوط بشكل متناسب. الآن، يمكنه القيام بنفس الشيء للخصائص مثل الهامش، التباعد، الظل الصندوق، وأكثر.

ما يفعله هو في الأساس حساب القيم الأنسب بناءً على أبعاد المتصفح، وهذه الحسابات تترجم إلى وظائف calc عندما يتم تجميعها. استخدام RFS أيضًا يتخلص من استخدام px السابق لاستخدام rem، حيث يساعد على تحقيق تناسق أفضل.

إذا كنت تستخدم ملفات Sass لبوتسطراب، يمكنك الآن استخدام مزامنات صنعها RFS، بما في ذلك font-size، margin، padding، وأكثر، مما يتيح لك التأكد من أن مكوناتك وأنماطك تكون متناسقة.

دعم من اليمين لليسار

Bootstrap 5 يضيف دعم قوي للأسفل اليسار (RTL) باستخدام RTLCSS. ونظرًا لاستخدام Bootstrap في جميع أنحاء العالم، فإنه يمثل خطوة كبيرة ومهمة لجعل دعم RTL متاحًا من الصندوق. ولهذا السبب، تخلى Bootstrap 5 عن التسمية المحددة للاتجاهات (على سبيل المثال، استخدام left و right) لصالح start و end. وهذا يجعل Bootstrap مرنًا بما يكفي ليعمل مع كل من المواقع من اليسار إلى اليمين (LTR) ومن اليمين إلى اليسار (RTL). على سبيل المثال، .dropleft أصبح الآن .dropstart، .ml-* أصبح .ms-*، وأكثر.

لجعل Bootstrap يتعرف ويطبق أنماط RTL على موقعك الإلكتروني، تحتاج إلى تعيين dir لـ <html> إلى rtl، وإضافة واصفة lang بلغة الموقع RTL. على سبيل المثال، lang="ar".

أخيرًا، ستحتاج إلى تضمين ملف CSS RTL لـ Bootstrap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

ومع ذلك، سيدعم موقعك RTL.

مخطط كسر جديد

Bootstrap 5 يجلب دعمًا لمخطط الكسر الجديد xxl المستهدف لأجهزة ذات عرض يزيد على أو يساوي 1400px. في السابق، كان أعلى مخطط كسر هو xl، الذي كان يستهدف أجهزة ذات عرض يزيد على أو يساوي 1200px. هذا التغيير يسمح بتوافرية أفضل لأجهزة أكبر شاشة، حيث لم يكن مخطط الكسر xl كافيًا.

استخدام النقطة الانفصالية الجديدة مشابه لجميع النقاط الانفصالية الأخرى. على سبيل المثال، لتطبيق التباعد على الأجهزة ذات العرض الأكبر من أو يساوي 1400px، يمكنك القيام بذلك باستخدام الفئة .p-xxl-2.

تحسين الوثائق

على الرغم من أن هذا ليس جزءًا من المكتبة نفسها، إلا أنه من الجيد ملاحظة تحسين وثائق Bootstrap. إن وثائق Bootstrap 5 تتمتع بتنظيم أفضل للمحتوى، حيث أصبحت المكونات التي لها تفاصيل أكثر توجيهًا لها قسمها الخاص الآن. على سبيل المثال، مكون النموذج في Bootstrap 4 كان صفحة واحدة فقط تحتوي على جميع المكونات داخلها. في Bootstrap 5، وثائق مكون النموذج هي قسم خاص بذاته، مع فروع للمكونات الفرعية المختلفة بما في ذلك Form Control، Select، Input Groups، وأكثر من ذلك.

بالإضافة إلى ذلك، أصبح التنقل في الوثائق أسهل الآن عبر الشريط الجانبي، خاصة للشاشات الأصغر. في Bootstrap 4، لا يمكن رؤية جدول المحتويات الجانبي على الأجهزة الصغيرة، مما يجعل من الصعب العثور على القسم المطلوب على الصفحة. في Bootstrap 5، جدول المحتويات يظهر دائمًا على جميع أحجام الشاشة.

علاوة على ذلك، في Bootstrap 5 يمكنك العثور على جميع متغيرات Sass، والميكسينات، والوظائف لكل مكون على صفحته. في السابق، كان هناك صفحة Theming فقط كانت تحتوي على بعض التفاصيل حول كيفية تغيير متغيرات الموضوع في Bootstrap. الآن، هناك قسم تخصيص بذاته يحتوي على تفاصيل أكثر حول كيفية تخصيص موضوع Bootstrap.

مكونات جديدة

Bootstrap 5 يجلب بعض المكونات الجديدة للمكتبة. بعض هذه المكونات كانت جزءًا من مكونات أخرى وهي الآن مكونات مستقلة.

الأكورديون

في السابق، كان الأكورديون جزءًا من مكون المتداول بدلاً من أن يكون مكونًا مستقلًا. في Bootstrap 5، الأكورديون هو مكون جديد. مع الأكورديون يأتي فئة جديدة، .accordion، التي تحتوي داخلها على قائمة من عناصر الأكورديون. علاوة على ذلك، لدى الأكورديون نمط جديد مقارنة بالنمط في Bootstrap 4. إليك مثال على مكون الأكورديون:

Bootstrap 5 أيضًا يضيف بعض الفئات لتغيير مظهر الأكورديون. على سبيل المثال، .accordion-flush يزيل بعض مظهر الأكورديون الافتراضي مثل ألوان الخلفية أو ألوان الحدود. يمكنك أيضًا جعل عنصر أكورديون مفتوحًا دائمًا عن طريق إزالة السمة data-bs-parent من عنصر .accordion-collapse.

الفساحة

مكون آخر جديد هو الفساحة، الذي يتيح لك إنشاء شريط جانبي يغطي. إنه الشريط الجانبي الذي يستخدم عادة على المواقع لإظهار القائمة على الأجهزة الصغيرة. يمكنك وضعه على أي جانب من الصفحة من خلال استخدام .offcanvas-start لليسار في LTR، .offcanvas-top للأعلى، .offcanvas-end لليمين في LTR، و .offcanvas-bottom للأسفل. يمكنك أيضًا تحديد ما إذا كان يجب أن يكون للفساحة خلفية أم لا. إليك مثال على استخدام مكون الفساحة:

التسمية العائمة

التسمية العائمة هي جزء جديد من مكونات النموذج. يتيح لك إنشاء إدخال حيث تبدو التسمية مثل موضع الإشارة في البداية، ثم عندما يحصل الإدخال على التركيز تطفو التسمية إلى أعلى الإدخال فوق القيمة. كما يعمل على عناصر <select> وعناصر <textarea>. فيما يلي مثال على استخدام التسميات العائمة:

الإضافات الأخرى

إلى جانب المكونات الجديدة، هناك طبقات جديدة للمكونات الحالية، طبقات إضافية جديدة، طبقات مساعدة جديدة، وأكثر من ذلك. فيما يلي قائمة بجميع الإضافات الجديدة في Bootstrap 5:

تم إضافة الفئة .row-cols-auto، والتي تسمح للأعمدة بأخذ عرضها الطبيعي.
A new utility class has been added to justify content called .justify-content-evenly.
في السابق، تم تحقيق الفجوات بين الأعمدة باستخدام أدوات المساحة. الآن، يمكنك تحديد الفجوة بين الأعمدة باستخدام أداة التخطيط الجديدة الفجوة. لتحديد فجوة أفقية، استخدم .gx-*. لتحديد فجوة عمودية، استخدم .gy-*. لتحديد فجوة على حد سواء أفقيا وعموديا، استخدم .g-*.
A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.
يمكن استخدام فئات مساعدة المحاذاة العمودية الآن مع الجداول.
A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.
هناك خيار الآن لتغيير الفاصل في Breadcrumb باستخدام متغير CSS --bs-breadcrumb-divider.

إليك مثالًا على تغيير الفاصل إلى >>:
هناك تغيير جديد للنمط المظلم للكروسيلات باستخدام الفئة .carousel-dark، وتغيير جديد للنمط المظلم للقوالب المنسدلة باستخدام .dropdown-menu-dark.
تم إضافة ميزة جديدة لإغلاق تلقائي في القوالب المنسدلة والتي يمكن أن تغير السلوك الافتراضي لإغلاق قائمة القالب المنسدلة. بشكل افتراضي، تغلق قوائم القوالب المنسدلة عند النقر خارج القالب المنسدلة أو أحد عناصر القالب المنسدلة. يمكنك تغيير ذلك عن طريق تحديد سمة بيانات data-bs-auto-close إلى inside، مما يجعل القالب المنسدل يغلق عند النقر على أحد عناصر القالب المنسدلة ولكن ليس عند النقر خارجه. يمكنك أيضًا تحديده إلى outside، مما سيجعل القالب المنسدل يغلق فقط عند النقر خارج القالب المنسدلة. أخيرًا، يمكنك تحديده إلى false لجعله يغلق فقط عند النقر مرة أخرى على زر القالب المنسدلة. إذا كنت تقوم بتهيئة القالب المنسدلة باستخدام JavaScript، يمكنك استخدام خيار autoClose بدلاً من السمة البيانات. فيما يلي مثال على استخدامه:
تم تحسين أسلوب التنسيق لإدخالات الملفات في النماذج.
A new color input has been added, using the class .form-control-color.
A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:
تم إضافة ظلال لونية ومظالم جديدة في متغيرات Sass.
تم إضافة حجمي تنظيم عنوان جديدين .display-5 و .display-6.
تم إضافة نمط أبيض لأزرار الإغلاق .btn-close-white.
يمكن للقوائم المنسدلة الآن أن تحتوي على .dropdown-items ملفوفة في عناصر <li>.
يمكن ترقيم العناصر في مجموعات القوائم الآن باستخدام الفئة الجديدة .list-group-numbered.
هناك خصائص transition للروابط في مكون Pagination، مما يحسن مظهرها.
تم إضافة فئة جديدة .bg-body تعيين لون خلفية الجسم إلى الأبيض.
تم إضافة فئات جديدة محركات الموضع لتعيين خصائص top، left، right أو bottom لعنصر. على سبيل المثال، .top-0.
تم إضافة فئتين جديدتين .translate-middle-x و .translate-middle-y لتمركز العناصر المطلقة بسهولة أفقيًا ورأسيًا على التوالي.
تمت إضافة فئات مساعدة جديدة لعرض الحدود عرض الحدود .border-* تتراوح من 1 إلى 5.
تمت إضافة مساعدة عرض جديدة .d-grid ومساعدة تباعد جديدة .gap.
تمت إضافة مساعدات ارتفاع السطر الجديدة .lh-1، .lh-sm، .lh-base و .lh-lg.
تم استبدال مساعدات النسبة الجديدة بما كان يسمى سابقًا بمساعدات إدراج الاستجابة للتوسعة. تم تغيير أسماء الفئات عن طريق استبدال embed-responsive بـ ratio و by بـ x. على سبيل المثال، ما كان يسمى سابقًا .embed-responsive-16by9 هو الآن .ratio-16x9.
A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.
هناك مساعدات .fs-* لحجم الخط، حيث تم تمكين RFS افتراضيًا.

الاستنتاج

كانت Bootstrap واحدة من أهم مكتبات CSS لمعظم العقد الماضي. تسمح للمطورين ببناء مواقع متعلقة بالاستجابة للشاشات بسهولة وتوفير تجربة مستخدم جيدة. مع إضافات وتغييرات Bootstrap 5، سيكون هذا العملية أسهل وسيسمح بتحسين تصاميم المواقع وتوفير تجربة مستخدم جيدة. إذا كنت تستخدم Bootstrap 4 وتفكر في الترقية إلى Bootstrap 5، فإن الترقية سهلة وربما لن تحتاج إلى إجراء العديد من التغييرات.

الأسئلة الشائعة (FAQs) حول Bootstrap 5

ما هي الاختلافات الكبرى بين Bootstrap 4 وBootstrap 5؟

أهم الاختلافات بين Bootstrap 4 وBootstrap 5 هو إزالة jQuery في الأخير. يستخدم Bootstrap 5 الآن JavaScript البسيط، مما يجعله أخف وأسرع. تغيير آخر كبير هو التحول من Jekyll إلى Hugo كمولد ثابت لموقع الويب للوثائق. كما يعرض Bootstrap 5 API جديد للمساعدات، لون موسع، وتحديث تحكم في النموذج.

كيف يمكنني الترقية من Bootstrap 4 إلى Bootstrap 5؟

التحويل من Bootstrap 4 إلى Bootstrap 5 يتطلب عدة خطوات. أولاً، تحتاج إلى إزالة jQuery واستبدالها بـ JavaScript العادي. بعد ذلك، قم بتحديث روابط CSS و JS لـ Bootstrap إلى أحدث إصدار. يجب عليك أيضًا استبدال الصفوف القديمة بالصفوف الجديدة التي تم إدخالها في Bootstrap 5. أخيرًا، قم بتحديث تحكم النماذج الخاصة بك وتحقق من دليل الترحيل الرسمي لـ Bootstrap لأي تغييرات إضافية.

ما هي الميزات الجديدة في Bootstrap 5؟

تقدم Bootstrap 5 العديد من الميزات الجديدة. إنها الآن تستخدم JavaScript العادي بدلاً من jQuery، مما يجعلها أخف وأسرع. كما أنها تقدم API جديد للمساعدات لتخصيص أكثر تنوعًا، وإلغاء للألوان، وتحديث تحكم النماذج، ومكتبة أيقونات SVG جديدة. تم تحسين الوثائق أيضًا مع التبديل من Jekyll إلى Hugo.

كيف يعمل API المساعدات الجديد في Bootstrap 5؟

API المساعدات الجديد في Bootstrap 5 يسمح بتخصيص أكثر تنوعًا. يتيح لك إنشاء فئات المساعدات الخاصة بك، والتحكم في المساعدات التي يتم توليدها، وحتى تعديل المساعدات الحالية. هذا يجعل من الأسهل تخصيص Bootstrap لاحتياجات وتفضيلاتك الخاصة.

ما هو الغرض من الإلغاء الموسع للألوان في Bootstrap 5؟

الإلغاء الموسع للألوان في Bootstrap 5 يوفر المزيد من الخيارات للتخصيص. فهو يشمل مجموعة أوسع من الألوان، مما يتيح لك إنشاء تصاميم أكثر تنوعًا وجذب البصر. هذا يجعل من السهل مطابقة طريقة الألوان على موقعك الإلكتروني أو التطبيق للألوان الخاصة بعلامتك التجارية.

كيف تم تحديث تحكم النماذج في Bootstrap 5؟

في Bootstrap 5، تم تحديث عناصر النموذج لاستخدام CSS بدلاً من JavaScript لتحسين الأداء والبساطة. كما أن لها مظهر جديد مع تصاميم أكثر حداثة ونظافة. علاوة على ذلك، تم استبدال النماذج المUSTOM بعناصر النموذج الجديدة لتحقيق تناسق أفضل.

ما هي مكتبة الرموز الشعرية SVG الجديدة في Bootstrap 5؟

مكتبة الرموز الشعرية SVG الجديدة في Bootstrap 5 توفر أكثر من 1000 رمز عالي الجودة مجانًا. يمكن تخصيص هذه الرموز واستخدامها في أجزاء مختلفة من موقعك الإلكتروني أو التطبيق، مثل في الأزرار والقوائم والتنبيهات. كما أنها محسنة للوصول.

كيف تم تحسين الوثائق في Bootstrap 5؟

في Bootstrap 5، تم تحسين الوثائق مع التحول من Jekyll إلى Hugo لمحول الموقع الثابت. هذا يجعل الوثائق أسرع وأسهل في الاستخدام. كما تشمل المزيد من الأمثلة والشروحات لمساعدتك على فهم كيفية استخدام Bootstrap بفعالية.

هل Bootstrap 5 متوافق مع جميع المتصفحات؟

Bootstrap 5 متوافق مع أحدث إصدارات جميع المتصفحات الرئيسية، بما في ذلك Chrome، Firefox، Safari، وEdge. ومع ذلك، لم يعد يدعم Internet Explorer. وذلك لأن Internet Explorer قديم ولا يدعم العديد من التقنيات الويب الحديثة.

كيف يمكنني البدء في استخدام Bootstrap 5؟

للبدء في استخدام Bootstrap 5، يمكنك تنزيله من الموقع الرسمي لـ Bootstrap. يمكنك أيضًا استخدام CDN لتضمين Bootstrap في مشروعك. بمجرد الحصول على Bootstrap، يمكنك البدء في استخدام فئاته ومكوناته في ملفات HTML الخاصة بك. تأكد من having the official Bootstrap documentation for more information and examples.