انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 17
دورة Bootstrap

البطاقات في BootStrapBootstrap Cards

ستتعلم في هذا الدرس عمل box صندوق مع امكانية وضع title و content مع صورة داخل هذا الصندوق مثل كارت المنتجات باستخدام bootstrap.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,949
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

Bootstrap Cards البطاقات في bootstrap

  • bootstrap card هو box صندوق له border اطار خارجي و padding ويشمل امكانية اضافة header, footer, content وغيرها.
  • يتم انشاء basic card بطاقة بسيطة باضافة كلاس card الى العنصر الذي يحتوي هذه البطاقة ثم نضيف كلاس card-body للمحتوى الذي بداخله.
جرّب بنفسك

Basic Card

عمل بطاقة بسيطة باستخدام bootstrap

HTML 
<div class="card" style="width:20rem;margin:20px 0 24px 0">
   <div class="card-body">
      <h4 class="card-title">Mohamed saleh</h4>
   </div>
</div>
جرّب بنفسك

BootStrap Card Header and Footer مقدمة وذيل البطاقة في BootStrap

يمكن تقسيم اي card اى 3 اقسام:

  • header: يتم انشاءه باستخدام كلاس card-header.
  • body: يتم انشاءه باستخدام كلاس card-body.
  • footer: يتم انشاءه باستخدام كلاس card-footer.

جرّب بنفسك

Header and Footer

تقسيم card الى header, body, footer.

HTML 
<div class="card">
   <div class="card-header">Header</div>
   <div class="card-body">Content</div>
   <div class="card-footer">Footer</div>
</div>
جرّب بنفسك

BootStrap Contextual Cards البطاقات السياقية في bootstrap

لعمل background خلفية لاي card نقوم باستخدام مجموعة من الكلاسات تسمي background contextual classes كلاسات الخلفية السياقية والتي تم شرحها في درس boostrap colors.

جرّب بنفسك

Contextual Cards

تلوين البطاقات باستخدام الكلاسات السياقية.

HTML 
<div class="container">
   <div class="card bg-primary">
      <div class="card-body">Basic card</div>
   </div>
</div>
جرّب بنفسك

BootStrap Cards Titles , text and links عناوين ونص وروابط البطاقات في bootstrap

  • نستخدم كلاس card-title. لنقوم بإضافة عنوان الى عنصر  heading.
  • نستخدم كلاس card-link. لنقوم بإضافة لون ازرق الي اي رابط وعمل تاثير hover له.
  • نستخدم كلاس card-text. لنقوم بحذف margin-bottom الخاص بالعنصر <p> اذا كان هو اخر child عنصر داخل card-body. 
جرّب بنفسك

Title, text and link

استخدام كلاسات card-title و card-text و card-link.

HTML 
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Some example text. Some example text.</p>
      <a href="#" class="card-link">Card link</a>
   </div>
</div>
جرّب بنفسك

BootStrap Card Images صور البطاقات في bootstrap

  • عادة ما يحتوي اي عنصر card على صورة توضع في بدايته او في النهاية.
  • يوضع عنصر <img> خارج card-body حتى تاخذ عرض card بالكامل.
  • يستخدم كلاس card-img-top لوضع الصورة في بداية card ولوضعها في نهاية البطاقة نستخدم كلاس card-img-bottom.
  • يمكن استخدام الصورة كخلفية للبطاقة عن طريق كلاس card-img-overlay.
جرّب بنفسك

Card Images

مثل على وضع صورة بداخل card.

HTML 
<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Mostafa</h4>
    <p class="card-text">Some example text.</p>
  </div>
</div>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…