Bootstrap Cards
البطاقات في BootStrap
ستتعلم في هذا الدرس عمل box صندوق مع امكانية وضع title و content مع صورة داخل هذا الصندوق مثل كارت المنتجات باستخدام bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap Cards
البطاقات في BootStrap
</>
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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
