info@semi-colen.com 002-010-90-2500-88
August 22, 2020 - بواسطة مشرف

bootstrap 5 ما الجديد وما هي المميزات في bootstrap 5، (bootstrap 5 Intro) الجزء 1

ما هو ال bootstrap؟

        بوتستراب Bootstrap: - هي إحدى أشهر وأقوى المكتبات التي تجمع HTML وCSS وJS لبناء صفحات ومواقع وتطبيقات الويب، وهي تفيد بشكلٍ أساسيٍّ في بناء مواقعٍ متناسقةٍ مع مختلف أحجام وقياسات الشاشات، بما في ذلك شاشات الهواتف الخلوية والأجهزة اللوحية، وهي مكتبةٌ مجانيةٌ ومفتوحة المصدر تتوفر للجميع على موقع Github وتم بناؤها من قبل شركة Twitter ولها.

تطور  bootstrap؟

 

 

 

إصدار bootstrap تاريخ الإصدار
Bootstrap 2 31 يناير 2012
Bootstrap 3 RC1 27 يناير 2013
Bootstrap 3 RC2 19 أغسطس 2013
Bootstrap 3 19 أغسطس 2013
Bootstrap 3.0.1 29 أكتوبر 2013
Bootstrap 3.0.2 6 نوفمبر 2013
Bootstrap 3.0.3 5 ديسمبر 2013
Bootstrap 3.1.0 30 يناير 2014
Bootstrap 3.1.1 13 فبراير 2014
Bootstrap 3.2.0 26 يونيو 2014
Bootstrap 3.3.0 29 أكتوبر 2014
Bootstrap 3.3.1 12 نوفمبر 2014
Bootstrap 3.3.2 19 يناير 2015
Bootstrap 3.3.4 16 مارس 2015
Bootstrap 3.3.5 15 يونيو 2015
Bootstrap 4 Alpha 1 19 أغسطس 2015
Bootstrap 3.3.7 25 يوليو 2016
Bootstrap 4 Alpha 3 27 يوليو 2016
Bootstrap 4 Alpha 4 27 يوليو 2016
Bootstrap 4 Alpha 5 5 سبتمبر 2016
Bootstrap 4 Alpha 6 6 يناير 2017
Bootstrap 4 beta 1 10 أغسطس 2017
Bootstrap 4 beta 2 19 أكتوبر 2017
Bootstrap 4 beta 3 28 ديسمبر 2017
Bootstrap 4.0.0 18 يناير 2018
Bootstrap 5 16 يونيو 2020

 

 

 

مقارنة بين bootstrap 4 , bootstrap 5: -

 

وجه المقارنة bootstrap 4 bootstrap 5
التوافق مع الشاشات يحتوي على 5 طبقات (xs ، sm ، md ، lg ، xl). يحتوي على 6 طبقات (xs ، sm ، md ، lg ، xl ، xxl).
اللون لها ألوان محدودة. تمت إضافة ألوان إضافية مع لوحة ألوان محسنة.
مكتبة jquery تدعم مكتبة الجيكويري وجميع الملحقات الخاصة بها تمت إزالة مكتبة الجيكويري وتحويله إلىVanilla JS مع بعض المكونات الإضافية الخاصة بها
Internet Explorer تدعم متصفح انترنت اكسبلولر10 و 11 لا تدعم متصفح انترنت اكسبلولر10 و 11

عناصر النموذج

 

Form elements

أزرار الاختيار ومربعات الاختيار(Radio buttons, checkboxes) لها مظهر مختلف في أنظمة التشغيل والمتصفحات المختلفة. سواء كان أي نظام تشغيل أو متصفحات ، فلن يتغير مظهر عناصر النموذج.

واجهة برمجة تطبيقات المرافق

Utilities API

لا يمكننا تعديل الأدوات المساعدة في bootstrap 4 أعطى Bootstrap 5 حرية التعديل وإنشاء الأداة المساعدة الخاصة بنا أيضًا
Glutter نحن نستخدم بريق مع حجم الخط بالبكسل نحن نستخدم .g * مع rem الخطوط العينية

الفئات العمودية

Vertical Classes

يمكن وضع الأعمدة نسبيًا لا يمكن وضع الأعمدة بشكل نسبي
أيقونات Bootstrap لا يحتوي Bootstrap 4 على رموز SVG الخاصة به لجعل الخطوط رائعة يحتوي Bootstrap 5 على رموز SVG الخاصة به

سطح البطاقة

Card deck

يتم استخدام سطح البطاقة لإنشاء مجموعة من البطاقات ذات عرض وارتفاع متساويين. فئة سطح البطاقة تمت إزالتها من Bootstrap 5
نافبار Navbar لدينا خاصية inline-block وسوف نحصل على قائمة منسدلة بيضاء كإعداد افتراضي لفئة القائمة المنسدلة الداكنة. تتم إزالة خاصية inline-block وسوف نحصل على القائمة المنسدلة السوداء كإعداد افتراضي لفئة القائمة المنسدلة الداكنة.
مولد موقع ثابت Static Site Generator يستخدم Bootstrap 4 برنامج Jekyll. يستخدم Bootstrap 5 برنامج Hugo.

Jekyll  (جيكل) : -‏ هو مولد مواقع ويب ثابتة بسيط ومتلائم مع المدونات، يُستَخدمُ للصفحات الشخصية، صفحات المشاريع، وصفحات المنظمات.

Hugo (هوجو): - هو  مولد مواقع ثابتة وسريع ومرن. لذلك ، فهو مكتوب بلغة Go مما يجعله كسرعة البرق وسهل الاستخدام والتكوين.
لغة Go: - هي لغة برمجة مكتوبة بشكل ثابت ومصممة في Google بواسطة روبرت جريسيمر وروب بايك وكين طومسون.

  •  سهولة القراءة والاستخدام (مثل Python أو JavaScript) ،
  • الشبكات عالية الأداء والمعالجات المتعددة.

        تم تصميم Go في Google في 2007 لتحسين إنتاجية البرمجة في عصر الأجهزة متعددة النواة والمتصلة بالشبكات وقواعد الرموز الكبيرة. أراد المصممون معالجة انتقادات اللغات الأخرى المستخدمة في Google ، مع الاحتفاظ بخصائصها المفيدة: -

  •  الكتابة الثابتة وكفاءة وقت التشغيل (مثل++ C) ،

مميزات bootstrap 4: -

1- الإنتقال من Less إلى Sass.

2- الإعتماد على نظام Flexbox.
3- ظهور مكون جديد اسمه Card.
4- التوقف عن دعم المتصفحات القديمة.
5- إعادة كتابة جميع إضافات وأكواد الجافاسكريبت.

مميزات bootstrap 5: -

  1. الانتقال من Jekyll إلى Hugo.
  2. إزالة الــ JQuery.
  3.  الانتقال الى Vanilla JavaScript.
  4.  أحجام الخطوط المتجاوبة (Responsive font sizes).
  5.  ازالة دعم Internet Explorer 10 , 11 من Bootstrap 5.
  6.  مكتبة أيقونات SVG icon library) SVG ).
  7.  تغير وحدة قياس العرض (Gutter width unit of measurement changed).
  8.  إزالة البطاقات (Remove Card Decks).
  9.  تحسين الــ Navbar.
  10. تحديثات الــ Class updates) Class).

بعض فئات CSS التي تمت إزالتها بالفعل ، وفقًا للوحة تتبع مشروع Github الرسمية لـ Bootstrap 5 هي:

  1. Card-deck.
  2. form-inline.
  3. form-row.
  4. list-inline.

وهنا بعض الكلاسات التي تم اضافتها في الاصدار الجديد: -

  1. row-cols-auto.
  2. g-* classes control the horizontal and vertical gutter width.
  3. gy-* classes control the vertical/row gutter width.
  4. gx-* classes control the horizontal/row gutter width.