Bootstrap

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

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

التاريخ

04 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1872

المواضيع

6
الشروحات chevron_left Bootstrap Cards chevron_left Bootstrap

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> Bootstrap Cards
البطاقات في bootstrap

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

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

<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.

<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

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

<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.

<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.

<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>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات