Bootstrap 3 vs Bootstrap 4 - نظرة عامة

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

تم إصدار Bootstrap 3 في عام 2013 والإصدار الأخير المستقر من Bootstrap 3.3.7 في يوليو 2016. في أكتوبر 2014 ، أعلن Twitter أن Bootstrap 4 قيد التطوير. تم إصدار أول إصدار ألفا من Bootstrap 4 في أغسطس 2015. والآن في أغسطس 2017 ، تم إطلاق إصدار Bootstrap 4.0.0-beta. يمكنك التحقق من هذا البرنامج التعليمي المتعمق لـ Bootstrap إذا كنت تريد البدء في التعلم من 0.

سيكون مركز اهتمام هذا المنشور هو الاختلافات الرئيسية والإضافات والطرح من الإصدار 3 إلى الإصدار 4.0.0 بيتا الذي تم إصداره حديثًا.

ما هو المختلف في الإصدار 4:

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

التغييرات العالمية:

• تم التبديل من Less إلى Sass لملفات CSS المصدر.
• تم التبديل من px rem كوحدة CSS أساسية في Bootstrap ، على الرغم من استمرار استخدام البكسل لاستعلامات الوسائط وسلوك الشبكة حيث لا تتأثر منافذ عرض الجهاز بحجم النوع.
• زاد حجم الخط العام من 14 بكسل إلى 16 بكسل .
• تمت إضافة طبقة شبكة جديدة لـ ~ 480 بكسل وأقل.

نظام الشبكة:

الخطوة الرئيسية في Bootstrap 4 نحو التحسين هي حركته نحو تبني Flexbox. كجزء من flexbox ، تم تضمين دعم لفئات المحاذاة الرأسية والأفقية. يضع Bootstrap 4 الكثير من التركيز على التخصيص. يتيح نظام طبقة الشبكة الجديد لـ Bootstrap 4 الاستمتاع بوجود ما يصل إلى 5 طبقات شبكية (مثال من 5 طبقات: .col-4 ، .col-sm-4 ، .col-md-4 ، .col-lg-4 ،. .col-xl-4). يمكن للمرء أن يقول بسهولة أن Bootstrap 4 يوفر الوصول إلى نظام شبكة محسّن.

• تمت إضافة طبقة شبكة sm جديدة أقل من 768 بكسل لمزيد من التحكم الدقيق. يوجد الآن xs و sm و md و lg و xl. هذا يعني أيضًا أنه تم رفع مستوى كل مستوى إلى أعلى (لذا أصبح .col-md-6 في v3 الآن .col-lg-6 في الإصدار 4).
• تم تغيير نقاط إيقاف استعلام وسائط نظام الشبكة وعرض الحاوية لحساب طبقة الشبكة الجديدة والتأكد من أن الأعمدة قابلة للقسمة بالتساوي على 12 عند أقصى عرض لها.
• تتم الآن معالجة نقاط توقف الشبكة وعرض الحاوية عبر خرائط Sass (نقاط توقف الشبكة بالدولار وقيمة الحاوية القصوى للعرض) بدلاً من مجموعة من المتغيرات المنفصلة. هذه تحل محل المتغيرات @ screen- * تمامًا وتسمح لك بالتخصيص الكامل لطبقات الشبكة.
• استفسارات وسائل الإعلام قد تغيرت أيضا. بدلاً من تكرار إعلانات استعلام الوسائط بنفس القيمة في كل مرة ، يوجد الآنinclude media-breakpoint-up / down / only. الآن ، بدلاً من كتابةmedia (min-width: @ screen-sm-min) {…} ، يمكنك كتابة @ include media-breakpoint-up (sm) {…}.

دعم المتصفح:

• تم إسقاط دعم IE8 و iOS 6. الإصدار 4 هو الآن IE9 + و iOS 7+ فقط. بالنسبة للمواقع التي تحتاج إلى أي منهما ، استخدم v3.

فئات المنفعة:

في Bootstrap 4 ، تم تضمين فئات أدوات مساعدة جديدة دون إعاقة أي وظيفة موجودة على الإطلاق. هذه الإضافات المهمة مثل تلك الخاصة بفئات محاذاة النص المتجاوبة ، والعوامات سريعة الاستجابة ، والتضمين سريع الاستجابة. بصرف النظر عن تقديم العديد من الاختصارات ، تسمح هذه ، على التوالي ، بتغيير محاذاة النص ، وتعويم العناصر وقياس نسبة العرض إلى الارتفاع لأي وسائط مضمنة. (على .d-md-none .hidden-md-up : .hidden-md-up .

الصور:

• تمت إعادة تسمية .img-responsive لـ .img-fluid .
• .rounded .img-rounded
• إعادة تسمية .rounded-circle .img-circle إلى دائرة دائرية

الجداول:

• لم تعد الجداول المستجيبة تتطلب عنصر التفاف. بكلمات بسيطة ، في Bootstrap 3 ، يجب إضافة فئة .table-responsive إلى الأصل <div>. ولكن في Bootstrap 4 ، ستتم إضافة فئة .table-responsive إلى عنصر <table> .
• تمت إضافة .table-inverse جديد.
• تمت إضافة معدّلات رؤوس الجدول: رأس .thead-default و. .thead-inverse
• تمت إعادة تسمية الفئات السياقية بحيث تحتوي على .table- -prefix. ومن ثم ، فإن .active .success ،. .danger .warning .table-info to .table-active ، .table-success Success ، .table-warning ، .table-danger risk and .table-info.

التنقل:

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

• مكون إعادة الكتابة مع فليكس بوكس.
• .navbar-default هو الآن .navbar-light ، على الرغم من أن .navbar-dark يظل كما هو. ومع ذلك ، لم تعد هذه الفئات تحدد background-color ؛ بدلاً من ذلك ، فإنها تؤثر بشكل أساسي على color فقط.
• .navbar-toggle الآن .navbar-toggler وله أنماط مختلفة وترميز داخلي (ليس أكثر من ثلاثة <span> s).
• أسقطت فئة .navbar-form تمامًا. لم تعد ضرورية. بدلاً من ذلك ، ما عليك سوى استخدام .form-inline وتطبيق أدوات الهامش عند الضرورة.
• لم تعد Navbars تتضمن margin-bottom أو border-radius بشكل افتراضي.

جدول مقارنة للإصدار 3 من Bootstrap والإصدار 4

كما قلنا ذلك بالفعل ، أعاد فريق Bootstrap كتابة إطار العمل. لذا فإن التغييرات المذكورة أعلاه هي فقط التغييرات الرئيسية التي كتبناها هنا. لقراءة متعمقة ، يرجى اتباع الرابط Bootstrap 4.

هل يجب أن ننتقل إلى Bootstrap 4 أو نبقى في Bootstrap 3

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

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

• الشبكة القائمة على Flexbox
• طبقة شبكة XLl جديدة
• أحدث شبكة تخطيط تلقائي
• خيارات التخصيص Navbar
• أدوات تباعد جديدة
• تكوين Sans Glyphicons (منطقة خالية من Bloat)
• تحجيم سريع الاستجابة
• يطفو استجابة
• هوامش آلية
• توسيط عمودي

خاتمة

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