بطاقات Bootstrap 5

بطاقة

بطاقات Bootstrap 5 هي صناديق ذات حواف، ويتمتع محتواها ببعض الهوامش. تتضمن خيارات مثل رأس البطاقة، قاعدة البطاقة، المحتوى، الألوان، إلخ.

بطاقة أساسية

بطاقة أساسية هي .card الصنف الذي أنشأته، يحتوي المحتوى في البطاقة على .card-body الصنف:

مثال

<div class="card">
  <div class="card-body">بطاقة أساسية</div>
</div>

جرب بنفسك

رأس البطاقة وقاعدة البطاقة

.card-header إضافة عنوان إلى البطاقة باستخدام الصنف،.card-footer إضافة قاعدة إلى البطاقة باستخدام الصنف:

مثال

<div class="card">
  <div class="card-header">رأس البطاقة</div>
  <div class="card-body">المحتوى</div>
  <div class="card-footer">قاعدة البطاقة</div>
</div>

جرب بنفسك

بطاقة سياقية

لإضافة لون خلفية للبطاقة، استخدم الصنف السياقي:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

مثال

جرب بنفسك

العنوان، النص والرابط

يرجى استخدام .card-title إضافة عنوان البطاقة إلى أي عنصر عنوان. إذا <p> العنصر هو .card-body الآخر أو الوحيد من بين الأبناء .card-text استخدم هذا الكلاس ل�除 الصفحة <p> الحد الأدنى من الهوامش في أسفل العنصر..card-link أضف تأثير لون أزرق عند التمرير فوق أي رابط

مثال

<div class="card">
  <div class="card-body">
    <h4 class="card-title">عنوان البطاقة</h4>
    <p class="card-text">نص امثلة. نص امثلة.</p>
    <a href="#" class="card-link">رابط بطاقة</a>
    <a href="#" class="card-link">رابط آخر</a>
  </div>
</div>

جرب بنفسك

صورة البطاقة

أحوذ .card-img-top أو .card-img-bottom أضف إلى <img>، يمكنك وضع الصورة في أعلى أو أسفل البطاقة.

لاحظوا أننا أضفنا الصورة خارج .card-body لتناسب العرض الكامل

مثال

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="صورة البطاقة">
  <div class="card-body">
    <h4 class="card-title">بيل جيتس</h4>
    <p class="card-text">بيل جيتس هو مبرمج ومهندس. نص امثلة. نص امثلة.</p>
    <a href="#" class="btn btn-primary">عرض الملف الشخصي</a>
  </div>
</div>

جرب بنفسك

مكيف صورة البطاقة

أحوذ الصورة وأستخدمها كخلفية .card-img-overlay أضف نصًا في أعلى الصورة:

مثال

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="صورة البطاقة">
  <div class="card-img-overlay">
    <h4 class="card-title">بيل جيتس</h4>
    <p class="card-text">نص امثلة. نص امثلة.</p>
    <a href="#" class="btn btn-primary">عرض الملف الشخصي</a>
  </div>
</div>

جرب بنفسك