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

Card Body Titles and Links جسم البطاقة وعناوينها وروابطها

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

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

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

يمثل الكلاس .card-body القلب النابض للبطاقة، إذ يوفر الحشو الداخلي الموحد حول المحتوى النصي. وبداخله ننسق العنوان الرئيسي عبر .card-title، والعنوان الفرعي عبر .card-subtitle .mb-2 .text-body-secondary، والفقرة الوصفية عبر .card-text، وروابط الإجراءات المتجاورة عبر .card-link التي تضبط المسافة البينية تلقائياً.

الصف 2 كود برمجي
HTML 
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Cloud Analytics</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">
      Real-time Metrics
    </h6>
    <p class="card-text">Live node latency.</p>
    <a href="#open" class="card-link">Open</a>
  </div>
</div>
جرّب بنفسك

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