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

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

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

1 صفوف تعليمية
Bootstrap
2,949 مشاهدة

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

الصف 1 شرح توضيحي
  • نستخدم كلاس 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)