شرح صفوف ومحتوى الفقرة
لا يكتمل احتراف الصور في بوتستراب 5 دون مراعاة معايير الإتاحة وسرعة الأداء: احرص دائماً على كتابة وصف دقيق في سمة alt للصور المعلوماتية، أو اتركها فارغة alt="" للصور الزخرفية البحتة حتى تتخطاها قارئات الشاشة دون إزعاج المستخدم الكفيف بقراءة اسم الملف.
ولمنع قفز المحتوى أثناء التحميل، حدد دائماً سمتي width وheight الأصليتين على وسم <img> إلى جانب .img-fluid ليحجز المتصفح نسبة الأبعاد مسبقاً، وفعل التحميل الكسول loading="lazy" للصور الواقعة أسفل طية الشاشة الأولى مع تفضيل صيغة WebP الخفيفة:
| الأداة أو السمة | الوظيفة التقنية | الأثر العملي في الواجهة |
|---|---|---|
.img-fluid | max-width: 100%; height: auto | منع خروج الصورة عن عرض العمود على الهواتف |
.img-thumbnail | حشو 0.25rem وإطار 1px مستدير | تنسيق صور المعارض والبطاقات المصغرة بنقرة |
.float-start / .float-end | تعويم منطقي للبداية أو النهاية | محاذاة تنعكس تلقائياً بين العربية والإنجليزية |
.d-block .mx-auto | كتلة مستقلة بهوامش أفقية تلقائية | توسيط الصورة المفردة في منتصف الحاوية |
.figure + .figure-caption | حاوية inline-block وتسمية دلالية | ربط الصور التوضيحية بوصفها لقارئات الشاشة |
width + height + loading="lazy" | حجز نسبة الأبعاد وتأجيل التحميل | تصفير مؤشر قفز التخطيط CLS وتسريع الفتح |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس تحويل الصور الثابتة إلى وسائط متجاوبة بكلاس img-fluid، وتنسيق المصغرات المؤطرة، ومحاذاة الصور وتوسيطها منطقياً في RTL وLTR، ودمج عنصر picture وبناء الأشكال التوضيحية الدلالية بأعلى أداء.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «تنسيق الجداول في بوتستراب 5» لبناء جداول بيانات احترافية مخططة ومتفاعلة وقابلة للتمرير السلس على الهواتف.