انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: البطاقات في بوتستراب 5

Horizontal Card Layouts تصميم البطاقات الأفقية

أتقن بناء البطاقات في بوتستراب 5.3 من تشريح الرأس والجسم والتذييل وصور البطاقات والنص المتراكب إلى البطاقات الأفقية وشبكات الارتفاع المتساوي والرابط الممتد.
2 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

استبدل Bootstrap 5 مكوّنات الوسائط القديمة بنمط البطاقة الأفقية المتجاوبة المبني على نظام الشبكة القياسي: نضع داخل .card صفاً بلا فجوات .row .g-0 يضم عمود الصورة .col-md-4 مع .img-fluid .rounded-start، وبجانبه عمود المحتوى .col-md-8 الحاضن لجسم البطاقة.

الصف 2 كود برمجي
HTML 
<div class="card">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="/images/examples/studio-workspace.webp"
        class="img-fluid rounded-start" alt="Desk">
    </div>
    <div class="col-md-8 p-3">Studio Workspace</div>
  </div>
</div>
جرّب بنفسك

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