کارت ها (Cards)

کارت های بوت استرپ باکس های مرتب هستند. داخلشان محتوا می گذاریم. مانند معرفی دانش آموز در برد مدرسه. سپس دکمه یا لینک هم می آوریم.

کارت پایه

برای ساخت کارت پایه از کلاس .card استفاده کن. محتوا داخل .card-body قرار می گیرد.

<div class="card">
  <div class="card-body">Basic card</div>
</div>

مشاهده در ادیتور

هدر و فوتر

برای عنوان بالا از .card-header و برای پایین از .card-footer کمک بگیر.

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

مشاهده در ادیتور

کارت های رنگی

برای پس زمینه های آماده از کلاس های زمینه مانند .bg-primary و .bg-success استفاده کن.

<div class="card">
  <div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
  <div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
  <div class="card-body">Success card</div>
</div>

مشاهده در ادیتور

عنوان، متن و لینک ها

برای عنوان از .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.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

مشاهده در ادیتور

تصویر کارت

برای تصویر بالا از .card-img-top و برای پایین از .card-img-bottom استفاده کن.

<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">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

مشاهده در ادیتور

پوشش متن روی تصویر

با .card-img-overlay متن را روی تصویر قرار بده. مثل نوشتن نام تیم روی پوستر.

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

مشاهده در ادیتور

نکته: برای مرور بهتر گروه های لیست را ببین. همچنین از دراپ داون ها کنار کارت های بوت استرپ استفاده کن.

گام های تمرینی

1. یک کارت ساده بساز و متن بگذار.
2. برای کارت هدر و فوتر اضافه کن.
3. نسخه رنگی با .bg-* بساز.
4. عنوان، متن و دو لینک اضافه کن.
5. تصویر بالا و پوشش متن را امتحان کن.

جمع بندی سریع

• .card ظرف کارت است؛ محتوا در .card-body می آید.
• هدر و فوتر با کلاس های مخصوص اضافه می شوند.
• پس زمینه ها با .bg-* سریع اعمال می شوند.
• تصاویر با .card-img-top و .card-img-bottom می آیند.
• متن روی تصویر با .card-img-overlay قرار می گیرد.