تخطيط الوسائط بديل media | الصندوق المرن والتكديس في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في الإصدار الرابع من بوتستراب كان هناك مكوّن شهير لعرض التعليقات والإشعارات المصورة، لكن بوتستراب 5 استغنى عنه بالكامل لأنك تستطيع بناءه اليوم بكود أنظف وأكثر مرونة بثلاثة كلاسات قياسية فقط: حاوية .d-flex .align-items-center (أو align-items-start للتعليقات الطويلة)، بداخلها غلاف صورة يحمل .flex-shrink-0 لمنع انكماشها، يليه غلاف النص المزود بكلاسي .flex-grow-1 .ms-3 ليتمدد ويترك مسافة منطقية تدعم العربية والإنجليزية تلقائياً:

الصف 2 كود برمجي

HTML

<div class="d-flex align-items-start p-3 border rounded-3">
  <div class="flex-shrink-0">
    <img src="/images/examples/studio-desk-3x2.webp"
    width="72" height="72" class="rounded object-fit-cover"
    alt="Workstation">
  </div>
  <div class="flex-grow-1 ms-3">
    <h3 class="h6 mb-1">Modular Workspace Guide</h3>
    <p class="small mb-0">Built with pure BS5 Flexbox.</p>
  </div></div>

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

الصف 5 شرح توضيحي

يلخص الجدول المرجعي التالي منظومة كلاسات الصندوق المرن والتكديس في بوتستراب 5.3:

المجموعة	الكلاسات القياسية	الدور التخطيطي
تفعيل الحاوية والاتجاه	`.d-flex`, `.d-inline-flex`, `.flex-column`, `.flex-md-row`	إنشاء سياق مرن وتحديد المحور الرئيسي متجاوباً
توزيع المحور الرئيسي	`.justify-content-between`, `center`, `evenly`	توزيع الفراغ بين العناصر أو توسيطها على المحور الأساسي
محاذاة المحور العمودي	`.align-items-center`, `.align-self-end`	محاذاة جميع الأبناء عمودياً أو استثناء عنصر مفرد
التمدد والانكماش	`.flex-fill`, `.flex-grow-1`, `.flex-shrink-0`	ملء المساحة الفارغة وحماية الصور من الانضغاط
الالتفاف والدفع الذكي	`.flex-wrap`, `.ms-auto`, `.mt-auto`	التفاف السطور المتعددة ودفع العناصر للحواف البعيدة
التكديس المختصر	`.vstack`, `.hstack` + `.gap-*`	بناء أعمدة وصفوف متراصة ومصطفة بأقل عدد كلاسات

الصف 6 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

ملخص الدرس: أتقنت في هذا الدرس تفعيل الصندوق المرن وتبديل اتجاهاته متجاوباً، وضبط المحورين الرئيسي والعمودي، والتحكم في التمدد والانكماش والالتفاف ودفع العناصر بـ ms-auto، واستخدام اختصارات vstack وhstack وبناء تخطيط الوسائط الحديث.

الخطوة التالية والدرس القادم

انتقل الآن إلى درس «أدوات النصوص والخطوط والروابط في بوتستراب 5» لإتقان محاذاة النصوص وأحجامها وأوزانها واقتطاع السطور الطويلة وتنسيق الروابط.

Modern Media Object Layout تخطيط الوسائط بديل media

شرح صفوف ومحتوى الفقرة

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

الخطوة التالية والدرس القادم

جميع فقرات هذا الدرس (الصندوق المرن والتكديس في بوتستراب 5)