کارت‌های 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> مargins پایین عنصر..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>

آزمایش کنید