في هذا الدرس 6تصفّح المواضيع
تمتلك ملفات الصور النقطية أبعاداً ثابتة بالبكسل؛ فإذا أدرجت صورة بعرض 1200px داخل عمود شبكي عرضه 360px على الهاتف دون قيود، فستفيض الصورة خارج حدود العمود وتكسر التخطيط الأفقي للصفحة بأكملها.
يحل كلاس .img-fluid هذه المشكلة جذرياً بتطبيق قاعدتي max-width: 100% وheight: auto معاً؛ فتتقلص الصورة تناسبياً لتطابق عرض العمود الأب دون أي تشويه في أبعادها، وفي الوقت نفسه لا تتمدد أبداً فوق دقتها الأصلية على الشاشات العريضة.
<div class="row">
<div class="col-md-8">
<img src="/images/examples/workspace-wide.webp"
class="img-fluid rounded"
alt="Modern developer desk setup">
</div>
</div>عند بناء معرض لقطات لمشروع برمجي أو صور منتجات مصغرة، يمنحك كلاس .img-thumbnail إطاراً جاهزاً أنيقاً يضيف حشواً داخلياً قدره 0.25rem وحدّاً رفيعاً بسمك 1px مع زوايا مستديرة ناعمة، فضلاً عن تضمينه تلقائياً لقواعد التجاوب max-width: 100% وheight: auto.
أما إذا رغبت في تنعيم زوايا الصورة الحادة دون إطار خارجي، فيكفي إضافة كلاس .rounded مباشرة إلى جانب .img-fluid.
<div class="row g-3">
<div class="col-6">
<img src="/images/examples/laptop-pro.webp"
class="img-thumbnail" alt="Laptop workstation">
</div>
<div class="col-6">
<img src="/images/examples/studio-desk-3x2.webp"
class="img-thumbnail" alt="Studio desk">
</div>
</div>لمحاذاة الصور على طرفي الحاوية بطريقة تحترم اتجاه اللغة تلقائياً، استبدل بوتستراب 5 كلاسات التعويم الفيزيائية القديمة بكلاسي .float-start لبداية السطر (اليمين في العربية واليسار في الإنجليزية) و.float-end لنهاية السطر، مع احتواء العنصر الأب للطفو عبر كلاس .overflow-hidden.
ولتوسيط صورة مستقلة في منتصف السطر أفقياً، تذكر أن وسم <img> عنصر سطري بطبيعته؛ لذا ندمج كلاس التحويل الكتلي .d-block مع الهامش الأفقي التلقائي .mx-auto ليتمركز في المنتصف بدقة.
<div class="overflow-hidden">
<img src="/images/examples/laptop-pro.webp"
width="140" class="rounded float-start" alt="Start">
<img src="/images/examples/studio-desk-3x2.webp"
width="140" class="rounded float-end" alt="End">
</div>عندما تختلف نسبة أبعاد الصورة المثالية بين الهاتف والحاسوب — كلقطة أفقية بانورامية على سطح المكتب مقابل لقطة مركزة على الهاتف — يتيح لك وسم <picture> القياسي تعريف مصادر متعددة عبر <source> ليحمل المتصفح الملف الأنسب فقط.
القاعدة الذهبية في بوتستراب 5 عند استخدام <picture> هي وضع كلاسات التنسيق مثل .img-fluid و.img-thumbnail على وسم <img> الداخلي حصراً، وليس على وسم <picture> الأب.
في المقالات التعليمية والتقارير الهندسية تحتاج إلى إرفاق شرح نصي أسفل الرسم أو الصورة بحيث يدرك محرك البحث وقارئ الشاشة ارتباطهما الوثيق. توفر حزمة الأشكال التوضيحية في بوتستراب 5 ثلاثة كلاسات متكاملة: .figure على وسم <figure>، و.figure-img مع .img-fluid على الصورة، و.figure-caption على وسم التسمية <figcaption>.
يمنح كلاس .figure-img الصورة هامشاً سفلياً محسوباً يفصلها بأناقة عن نص الوصف، بينما ينسق .figure-caption التسمية بحجم خط هادئ متناسق.
<figure class="figure">
<img src="/images/examples/studio-workspace.webp"
class="figure-img img-fluid rounded"
alt="Dual monitor studio workspace">
<figcaption class="figure-caption">
Figure 2: Clean dual-display development desk.
</figcaption>
</figure>لا يكتمل احتراف الصور في بوتستراب 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» لبناء جداول بيانات احترافية مخططة ومتفاعلة وقابلة للتمرير السلس على الهواتف.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Fluid Image الصورة المتجاوبة المرنة
- صورة مزودة بكلاس .img-fluid يضبط أقصى عرض عند 100% والارتفاع تلقائياً لتتقلص بمرونة داخل حاويتها.
- للمراجعة
- 02 Image Thumbnail الإطار المصغر للصورة
- كلاس .img-thumbnail الذي يحيط الصورة بحشو داخلي 0.25rem وإطار رفيع مستدير الحواف لمعارض الصور.
- للمراجعة
- 03 Semantic Figure الشكل التوضيحي الدلالي
- حاوية figure تربط الصورة التوضيحية بتسميتها النصية دلالياً وبصرياً عبر كلاسي figure-img وfigure-caption.
- للمراجعة
- 04 Art Direction التوجيه البصري للصور
- تقديم نسخ مقصوصة بنسب مختلفة من الصورة حسب عرض الشاشة عبر عنصر picture مع وضع .img-fluid على وسم img الداخلي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CLS CLS
- Cumulative Layout Shift
- مقياس أداء يرصد قفز عناصر الصفحة المفاجئ عند تحميل صور لم تُحدد لها أبعاد العرض والارتفاع مسبقاً.
- للمراجعة
- 02 WebP WebP
- Web Picture Format
- صيغة ضغط صور قياسية حديثة توفر حجماً صغيراً وجودة بصرية عالية لتسريع تحميل الواجهات المتجاوبة.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- اتجاه الواجهة العربية حيث يضع كلاس .float-start الصورة في أقصى اليمين ويضعها .float-end في أقصى اليسار تلقائياً.
- للمراجعة
- 04 ALT ALT
- Alternative Text Attribute
- السمة الإلزامية على وسم الصورة لوصف محتواها لقارئات الشاشة وعند تعذر تحميل ملف الصورة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أدرج الصورة المحلية /images/examples/laptop-pro.webp مع دمج كلاسات img-thumbnail وd-block وmx-auto وتزويدها بعرض 280 ونص بديل واضح.
-
غلّف الصورة /images/examples/studio-workspace.webp داخل عنصر figure بكلاس figure واستخدم figure-img وimg-fluid وrounded على الصورة مع تسمية figcaption بكلاس figure-caption.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما قاعدتا CSS اللتان يطبقهما كلاس .img-fluid في بوتستراب 5؟
يطبق .img-fluid خاصيتي max-width: 100% وheight: auto لضمان تقلص الصورة تناسبياً داخل حاويتها.
لماذا يلزم دمج كلاس .d-block مع .mx-auto لتوسيط عنصر <img> مستقل أفقياً؟
لأن الصورة عنصر سطري افتراضياً، ولا تعمل الهوامش الأفقية التلقائية للتوسيط إلا على العناصر الكتلية.
عند استخدام عنصر <picture>، هل يُوضع كلاس .img-fluid على وسم <picture> بدلاً من وسم <img> الداخلي؟
خطأ؛ يجب وضع كلاسات التنسيق والتحجيم مثل .img-fluid على وسم <img> الداخلي حصراً وليس على <picture>.
ما الكلاس الحديث في بوتستراب 5 الذي حل محل الكلاس الملغى .float-left لمحاذاة الصور منطقياً؟
استبدل بوتستراب 5 الاتجاهات الفيزيائية بالاتجاهات المنطقية؛ فحل .float-start محل .float-left.
ما الثلاثي القياسي من الكلاسات لتنسيق الشكل التوضيحي وتسميته في بوتستراب 5؟
يُطبق .figure على الحاوية، و.figure-img على الصورة، و.figure-caption على عنصر التسمية.
ما المظهر البصري الذي يضيفه كلاس .img-thumbnail إلى جانب التجاوب المرن للصورة؟
يضيف حشواً داخلياً قدره 0.25rem وحدّاً رفيعاً بسمك 1px مع زوايا مستديرة ناعمة.
هل يساعد تحديد سمتي width وheight مع كلاس .img-fluid في منع قفز التخطيط أثناء تحميل الصفحة؟
صحيح؛ يحسب المتصفح نسبة الأبعاد مسبقاً ليحجز مكان الصورة بدقة قبل اكتمال تنزيلها مع بقاء تحجيمها مرناً.
كيف تُكتب سمة alt لصورة زخرفية بحتة لا تضيف معلومة نصية للقارئ؟
تُكتب فارغة alt="" لإخبار قارئات الشاشة بتجاوز العنصر الزخرفي دون قراءة مسار الملف المزعج.