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

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

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

يدعم مكوّن البطاقة ثلاثة أوضاع احترافية للصور: وضع الصورة في الأعلى بكلاس .card-img-top لتستدير زاويتاها العلويتان فقط بالتطابق مع إطار البطاقة، أو في الأسفل بكلاس .card-img-bottom، أو تحويل الصورة إلى خلفية كاملة للبطاقة بكلاس .card-img مع وضع النصوص فوقها داخل طبقة .card-img-overlay.

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

HTML

<div class="card">
  <img src="/images/examples/laptop-pro.webp"
    class="card-img-top" alt="Workstation">
  <div class="card-body">
    <h5 class="card-title">Studio Pro</h5>
    <p class="card-text mb-0">Pro workstation.</p>
  </div>
</div>

جرّب بنفسك

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

Card Images and Overlays صور البطاقات والنص المتراكب

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

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