7 ميزات جديدة للبحث عنها في Bootstrap 5

7 ميزات جديدة للبحث عنها في Bootstrap 5

يأتي Bootstrap 5 مع تغييرات كبيرة ، بما في ذلك انخفاض دعم Internet Explorer (IE) وتبعية jQuery. يعد Bootstrap ، الذي طوره Twitter ، أكثر إطارات عمل CSS شيوعًا في العالم. يبحث إطار عمل واجهة المستخدم مفتوحة المصدر في وضع نفسه للمستقبل ، وقد أدى ذلك إلى إجراء تغييرات رائدة في الإصدار الخامس.





أدى انخفاض Bootstrap في IE إلى جعله أول أداة تطوير ويب للقيام بذلك. وتأتي هذه الخطوة مع استمرار تضاؤل ​​الحصة السوقية لبرنامج Internet Explorer ، حيث تمثل أقل من 3٪ من جميع متصفحات الويب.



تابع القراءة لمعرفة المزيد من التحسينات التي تم إجراؤها على Bootstrap وكيف تؤثر عليك.





1. دعم jQuery

لن يستخدم Bootstrap مكتبة jQuery بعد الآن. بدلاً من ذلك ، قام فريق التطوير بتحسين مكتبة JavaScript لإحداث هذا التغيير. لم تكن تبعية jQuery بالضرورة شيئًا سيئًا في Bootstrap.

في الواقع ، أدى إدخال jQuery إلى تغيير جذري في كيفية استخدام JavaScript. لقد قام بتبسيط مهام الكتابة في JavaScript والتي كانت ستأخذ العديد من أسطر التعليمات البرمجية لولا ذلك.



متعلق ب: تعرف على كيفية إنشاء عنصر في jQuery

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



أصبح حجم الملف المصدر أخف بمقدار 85 كيلو بايت من جافا سكريبت المصغر ، وهذا أمر أساسي لأن Google تعتبر أوقات تحميل الصفحة لمواقع الجوال كعامل ترتيب.

بقدر ما لم يعد استخدام jQuery مطلوبًا في Bootstrap 5 ، فلا يزال بإمكانك استخدامه إذا أردت. من الجدير بالذكر أيضًا أن جميع مكونات JavaScript الإضافية تظل متاحة.



2. خصائص CSS المخصصة

بإسقاط دعم Internet Explorer ، يمكن استخدام خصائص (متغيرات) CSS المخصصة. لا يدعم IE الخصائص المخصصة - سبب واحد فقط يجعله يعيق مطوري الويب لفترة طويلة.

تجعل خصائص CSS المخصصة CSS أكثر مرونة وقابلية للبرمجة. تكون متغيرات CSS مسبوقة بـ -ب لمنع التعارض مع CSS لطرف ثالث.

هناك نوعان من المتغيرات المتاحة: المتغيرات الجذرية ومتغيرات المكون.

يمكن الوصول إلى متغيرات الجذر أينما تم تحميل Bootstrap CSS. تقع هذه المتغيرات في _root.scss file وهي جزء من ملفات dist المترجمة.

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

3. تحسين نظام الشبكة

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

  • فئة الحضيض ( .أولاد ) إلى أداة مساعدة ( .g * ) يشبه إلى حد كبير الهامش والحشو
  • كما تم تضمين فئات التباعد الرأسي
  • لم تعد الأعمدة مفترضة إلى الموقف: نسبي

4. تحسين التوثيق

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

هناك الآن المزيد من المرونة لتخصيص سماتك بحيث لا يحمل كل موقع أو تطبيق نفس التشابه. تم بالفعل توسيع صفحة السمات v4 بمزيد من المحتوى ومقتطفات التعليمات البرمجية للبناء فوق ملفات Sass (المعالج المسبق لـ CSS). يمكنك أيضًا العثور على مشروع npm مبتدئ على النظام الأساسي GitHub والذي يتوفر كمستودع للقوالب.

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

5. تحسين ضوابط النموذج

قام Bootstrap بتحسين عناصر التحكم في النموذج ومجموعات الإدخال والمزيد.

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

لم تعد عناصر تحكم النموذج الجديدة تحتوي على علامات ملونة غير ضرورية ، بل ركز بدلاً من ذلك على ميزات التصميم القياسية والمنطقية.

6. Bootstrap 5 يضيف واجهة برمجة تطبيقات المرافق

بعد مكتبات CSS الجديدة مثل Tailwind CSS ، يقوم Bootstrap الآن بإضافة مكتبة أدوات مساعدة. يقول فريق bootstrap إنهم سعداء برؤية كيف يتحدى المطورون الآخرون الطريقة التي بنيناها على الويب على مدار العقد الماضي أو أكثر.

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

كوسيلة لمنح تنظيم أفضل ، تم نقل بعض الأدوات المساعدة التي كانت في الإصدار 4 إلى قسم المساعدون.

7. مكتبة أيقونات Bootstrap الجديدة

يفتخر Bootstrap الآن بمكتبة أيقونات SVG مفتوحة المصدر الخاصة به مع أكثر من 1300 رمز. إنه مخصص لمكونات إطار العمل ولكن لا يزال بإمكانك العمل معهم في أي مشروع.

نظرًا لكونها صور SVG ، يمكن قياسها بسرعة ويمكن تنفيذها بعدة طرق وأيضًا تصميمها باستخدام CSS.

يمكنك تثبيت الرموز باستخدام فوق مستوى سطح البحر:

$ npm i bootstrap-icons

قم بتثبيت Bootstrap 5

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

$ npm i bootstrap@next

في وقت كتابة هذا التقرير ، كان الإطار في نسخته التجريبية 3. هذا يعني أن البرنامج آمن للاستخدام ولكنه لا يزال قيد التطوير. لا تتردد في تقديم ملاحظات إلى الفريق وتقديم أي مساهمة ضرورية.

يشارك يشارك سقسقة بريد الالكتروني مقدمة لمكونات الويب والبنية القائمة على المكونات

دعنا نلقي نظرة على مكونات الويب الشائعة ونرى سبب فائدتها.

اقرأ التالي مواضيع ذات صلة
  • برمجة
  • تطوير الشبكة
  • جافا سكريبت
  • CSS
نبذة عن الكاتب جيروم ديفيدسون(تم نشر 22 مقالة)

جيروم كاتب في MakeUseOf. يغطي مقالات عن البرمجة و Linux. إنه أيضًا متحمس للعملات المشفرة ويحتفظ دائمًا بعلامات تبويب في صناعة التشفير.

المزيد من Jerome Davidson

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

كيفية تثبيت متجر google play على roku
انقر هنا للاشتراك