في هذا الدرس 6تصفّح المواضيع
يتطلب بناء واجهة ويب احترافية ومتجاوبة من الصفر كتابة مئات الأسطر المتكررة من قواعد CSS لتوحيد فروق المتصفحات، وحساب نسب الأعمدة المرنة، وتنسيق الأزرار والنماذج عبر شاشات الهواتف والأجهزة اللوحية والحواسيب العريضة. هنا يأتي دور إطار العمل مفتوح المصدر Bootstrap 5 بوصفه الحقيبة الهندسية الأشهر عالمياً لتطوير الواجهات الأمامية بسرعة وموثوقية قياسية.
بدلاً من إعادة اختراع معادلات التخطيط في كل مشروع جديد، تمنحك مكتبة بوتستراب منظومة متكاملة من الكلاسات الجاهزة والمكونات التفاعلية المبنية بلغة JavaScript النقية؛ فبمجرد إسناد كلاسات معيارية مثل container و btn إلى عناصر HTML5 تحصل فوراً على تناسق بصري وتجاوب تلقائي عبر مختلف الأجهزة.
<div class="container">
<h1>Welcome to Bootstrap 5.3</h1>
<p>Clean responsive UI with ready-made classes.</p>
<button type="button" class="btn btn-primary">
Explore Components
</button>
</div>تتجاوز زيارات الهواتف الذكية اليوم أكثر من نصف حركة الويب العالمية؛ لذلك صُمّم Bootstrap 5 من جذوره وفق فلسفة الجوال أولاً، حيث تستهدف التنسيقات الافتراضية الشاشات الصغيرة مباشرةً بأبسط قواعد ممكنة، ثم تُضاف تحسينات التوسع تدريجياً كلما اتسع عرض الشاشة:
- ترتيب أولويات المحتوى: يفرض البدء بشاشة الهاتف التركيز على العناصر الجوهرية أولاً وتقديم تجربة قراءة صافية قبل توزيع الكتل أفقياً على الشاشات الكبيرة.
- كفاءة الأداء على الهواتف: يقرأ متصفح الهاتف القواعد الأساسية الخفيفة فوراً، بدلاً من تحميل تخطيط مكتبي معقد ثم استهلاك المعالج في إلغائه وإعادة تكديسه.
- ملاءمة اللمس القياسية: ضُبطت أحجام الخطوط وارتفاعات الأسطر وحشو الأزرار مثل
btnفي الإصدار الخامس لتوفر مساحات نقر مريحة للأصابع تلقائياً.
<div class="container">
<h2>Mobile-First Content Block</h2>
<p>Stacks naturally on phones and centers on desktop.</p>
<button type="button" class="btn btn-primary">
Start Learning
</button>
</div>يمثل الانتقال من الإصدار الرابع إلى Bootstrap 5 قفزة معمارية شاملة أعادت صياغة الإطار بالكامل ليواكب معايير الويب الحديثة وتطبيقات الواجهات المعاصرة:
- الاستغناء التام عن مكتبة jQuery القديمة: أُعيدت كتابة جميع الإضافات التفاعلية بلغة
JavaScript ES6القياسية النقية، ما قلّص حجم الملفات المحمّلة وسهّل دمج الإطار في المشاريع الحديثة. - عزل سمات التشغيل ببادئة صريحة: اعتمد الإصدار الخامس البادئة الموحدة
data-bs-*لتمييز السمات التفاعلية الخاصة ببوتستراب ومنع أي تعارض مع سمات البيانات المخصصة في مشروعك. - الدعم الأصيل للعربية والاتجاهات المنطقية: استُبدلت التسميات الفيزيائية القديمة لليمين واليسار بمفهوم البداية
startوالنهايةendمع توفير نسخة رسمية مدمجة للواجهات العربية. - توسيع التخطيط والمتغيرات الحية: أضاف الإصدار 5.3 طبقة شاشات سادسة
xxlللشاشات العريضة، ومكتبة أيقونات رسمية مستقلة، واعتماداً واسعاً على متغيراتCSSالحية والوضع الداكن الأصيل.
يساعدك فهم المكونات الأساسية لحزمة Bootstrap 5.3 على اختيار الملفات الدقيقة التي تحتاجها صفحتك دون تحميل أصول زائدة:
- ملف التنسيقات المضغوط
bootstrap.min.css: يضم طبقة التطبيع القياسيReboot، ونظام الحاويات والشبكة، وتنسيقات النصوص والجداول، والمكونات البصرية، والأدوات المساعدة. - ملف التنسيقات العربي
bootstrap.rtl.min.css: النسخة المعكوسة أفقياً والمصممة خصيصاً لتشغيل الواجهات العربية من اليمين إلى اليسار بدقة هندسية كاملة. - حزمة السكريبت الشاملة
bootstrap.bundle.min.js: تجمع إضافاتJavaScriptالتفاعلية لبوتستراب مع مكتبة التموضع الذكي Popper اللازمة لحساب مواقع القوائم المنسدلة والتلميحات العائمة.
<div class="container">
<p id="bsStatus">Checking runtime...</p>
</div>
<script>
const el = document.getElementById('bsStatus');
el.textContent = 'Bootstrap JS loaded: ' +
(typeof bootstrap === 'object');
</script>تعتمد فرق الهندسة في الشركات الناشئة والمنصات الحكومية ولوحات التحكم السحابية على Bootstrap 5 لأنه يعالج تحديات الواجهة المتكررة بمنهجية موحدة:
- سرعة بناء النماذج والإطلاق: يختصر زمن تحويل الأفكار إلى صفحات متجاوبة قابلة للتشغيل الفعلي من أسابيع إلى ساعات معدودة.
- توحيد لغة الفريق البرمجية: عندما يعمل عدة مطورين على نفس المشروع، تضمن الكلاسات القياسية تطابق المسافات والألوان والسلوك دون تضارب في ملفات التنسيق.
- أساس رصين لإمكانية الوصول: صُممت مكونات بوتستراب مع مراعاة التنقل بلوحة المفاتيح وتباين الألوان وإرشادات
ARIAلقارئات الشاشة. - استقرار الصيانة والتوثيق: يتمتع الإطار بتوثيق رسمي دقيق ومجتمع عالمي واسع يضمن سهولة التحديث واستدامة المشاريع طويلة الأمد.
يُعد اختيار الأداة المناسبة لطبيعة المشروع مهارة هندسية أساسية؛ إذ يتألق Bootstrap 5 بقوة في تطبيقات الويب متعددة الصفحات، ولوحات التحكم الإدارية، والمنصات التعليمية والتجارية، والأنظمة ثنائية اللغة العربية والإنجليزية التي تتطلب مكونات جاهزة وموثوقة وإنجازاً سريعاً. أما الصفحات الترويجية البسيطة جداً المؤلفة من قسم فني واحد غير تقليدي فقد تكتفي بملف CSS مخصص صغير أو استيراد انتقائي عبر Sass.
يلخص الجدول المرجعي التالي أبرز الركائز المعمارية والفروق الجوهرية في Bootstrap 5.3:
| الركيزة المعمارية | الجيل القديم (BS4) | الجيل الحديث Bootstrap 5.3 | الأثر العملي للمطور |
|---|---|---|---|
| محرك التفاعل البرمجي | اعتمد إلزامياً على مكتبة jQuery الخارجية | مبني بالكامل بـ Vanilla ES6 JS | حزمة أخف وسرعة تحميل أعلى وتكامل سلس |
| سمات التحكم بالبيانات | سمات عامة غير معزولة ببادئة | نطاق معزول بالبادئة data-bs-* | منع تضارب السمات مع الكود الخاص بالمشروع |
| دعم العربية RTL | اعتمد على ترقيعات خارجية غير رسمية | ملف bootstrap.rtl.min.css رسمي واتجاهات منطقية | بناء واجهات عربية وإنجليزية متطابقة الدقة |
| نقاط التوقف المتجاوبة | 5 طبقات تتوقف عند xl (1200px) | 6 طبقات تشمل xxl (1400px فأكثر) | استغلال أمثل للشاشات المكتبية العريضة |
| محرك التخصيص والألوان | مقتصر على متغيرات Sass وقت البناء | متغيرات --bs-* حية مع وضع داكن أصيل | تبديل فوري للثيمات وتخصيص مرن بالمتصفح |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على مفهوم إطار العمل Bootstrap 5.3، وفلسفة التصميم للجوال أولاً، وأهم التحولات المعمارية عن الإصدار الرابع مثل إزالة jQuery واعتماد البادئة data-bs-* والدعم الأصيل للعربية، إلى جانب مكونات حزمة الملفات الأساسية ومتى نختار الإطار في مشاريعنا. الخطوة التالية: انتقل الآن إلى الدرس الثاني «تثبيت بوتستراب 5 وقالب البداية» لتتعلم طرق تضمين الإطار بأمان وبناء مستند البداية القياسي خطوة بخطوة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Front-End Framework إطار عمل الواجهات الأمامية
- مجموعة قياسية متكاملة من قواعد تنسيق CSS والمكونات التفاعلية الجاهزة التي تسرّع بناء واجهات مستخدم متجاوبة ومتناسقة عبر المتصفحات.
- للمراجعة
- 02 Mobile-First Design التصميم للجوال أولاً
- منهجية هندسية تبدأ بكتابة التنسيقات الأساسية لشاشات الهواتف الصغيرة أولاً ثم تضيف قواعد التوسع تدريجياً للشاشات الأكبر.
- للمراجعة
- 03 Popper Engine محرك التموضع Popper
- مكتبة حساب إحداثيات خفيفة مدمجة داخل حزمة bootstrap.bundle.min.js لضبط تموضع القوائم المنسدلة والتلميحات والبالونات بذكاء داخل حدود الشاشة.
- للمراجعة
- 04 Logical Directions الاتجاهات المنطقية
- اعتماد مفهومي البداية start والنهاية end بدلاً من اليسار واليمين الفيزيائيين ليتكيف التخطيط تلقائياً مع اتجاه لغة الصفحة العربية أو الإنجليزية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- لغة التنسيق القياسية التي يبني عليها بوتستراب طبقة التطبيع والشبكة المتجاوبة والمكونات والأدوات المساعدة.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- اتجاه تدفق النصوص والواجهات من اليمين إلى اليسار المدعوم أصالةً في بوتستراب 5 للغة العربية واللغات المماثلة.
- للمراجعة
- 03 ES6 ES6
- ECMAScript 2015 Standard
- المعيار الحديث للغة JavaScript الذي أُعيدت به كتابة كافة إضافات بوتستراب 5 التفاعلية دون الحاجة لمكتبة jQuery.
- للمراجعة
- 04 ARIA ARIA
- Accessible Rich Internet Applications
- سمات قياسية لإمكانية الوصول تُدمج مع مكونات بوتستراب لإيصال أدوار العناصر وحالاتها بدقة إلى قارئات الشاشة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
تنقّل بين التبويبات الثلاثة في مختبر المقارنة الحي ولاحظ كيف يحوّل كلاس container وكلاسا btn و btn-primary مظهر الخطوط والمحاذاة وتباين الزر التفاعلي.
-
افتح المثال البرمجي الأول في محرر التجريب وعدّل نص العنوان الرئيسي <h1> والزر إلى اسم مشروعك، ثم تحقّق من حفاظ كلاس container على هوامش جانبية متناسقة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما الوظيفة الأساسية التي يؤديها إطار العمل Bootstrap 5 في تطوير الويب؟
يعمل Bootstrap 5 كإطار عمل للواجهات الأمامية يوفّر كلاسات CSS وإضافات JavaScript قياسية لبناء صفحات متجاوبة ومتناسقة بسرعة.
يشترط Bootstrap 5 تحميل مكتبة jQuery أولاً لكي تعمل مكوناته التفاعلية.
خطأ؛ فقد استغنى Bootstrap 5 نهائياً عن مكتبة jQuery وأُعيدت كتابة جميع إضافاته بلغة JavaScript القياسية النقية.
ماذا تعني فلسفة «الجوال أولاً» عملياً في تصميم Bootstrap 5؟
تستهدف التنسيقات الافتراضية شاشات الهواتف الضيقة أولاً، ثم تتوسع التخطيطات تصاعدياً كلما زاد عرض الشاشة.
ما البادئة القياسية لسمات البيانات التفاعلية في Bootstrap 5 لمنع تعارض الأسماء مع السكريبتات الأخرى؟
اعتمد الإصدار الخامس البادئة الصريحة data-bs-* لعزل سماته التفاعلية عن أي كود خارجي.
ما المكتبة المساعدة المدمجة تلقائياً داخل ملف الحزمة bootstrap.bundle.min.js؟
يضم ملف bootstrap.bundle.min.js مكتبة Popper المسؤولة عن حساب تموضع القوائم المنسدلة والتلميحات والبالونات.
يوفّر Bootstrap 5 دعماً رسمياً أصيلاً للواجهات العربية عبر ملف bootstrap.rtl.min.css والاتجاهات المنطقية start وend.
صواب؛ إذ أدمج الإصدار الخامس دعماً رسمياً كاملاً للعربية عبر bootstrap.rtl.min.css ومفاهيم البداية والنهاية المنطقية.
ما طبقة الشاشات العريضة السادسة التي أُضيفت حديثاً في Bootstrap 5؟
أضاف Bootstrap 5 نقطة التوقف السادسة xxl للشاشات التي يبلغ عرضها 1400 بكسل فأكثر.
في أيٍّ من الحالات التالية يحقق اختيار Bootstrap 5 أعلى قيمة هندسية للفريق؟
يحقق بوتستراب أعلى إنتاجية في لوحات التحكم والمنصات متعددة الصفحات والتطبيقات ثنائية اللغة التي تحتاج نظاماً بصرياً موحداً.