📌 جلسه یازدهم – کامپوننت‌ها – Cardها (بخش دوم)

✅ مباحث اصلی

• تصویر در کارت‌ها
  • .card-img-top → تصویر در بالای کارت
  • .card-img-bottom → تصویر در پایین کارت
• تصویر پس‌زمینه کارت (Overlay)
  • .card-img + .card-img-overlay → نمایش متن روی تصویر
• چیدمان کارت‌ها (Card Columns)
  • .card-columns → نمایش شبکه‌ای از کارت‌ها با ارتفاع‌های متفاوت (Masonry-like)
• چیدمان کارت‌ها در یک ردیف (هم‌ارتفاع)
  • .card-deck → کارت‌ها کنار هم و با ارتفاع برابر
• کنترل تعداد ستون کارت‌ها (روش جدیدتر)
  • استفاده از row row-cols-*
    • .row-cols-1 → همه کارت‌ها تک‌ستونه
    • .row-cols-2, .row-cols-3 و… → تعیین تعداد ستون‌ها
    • جایگزین مدرن‌تر برای .card-deck و .card-columns

✅ کلاس‌های کلیدی جلسه

• .card-img-top / .card-img-bottom
• .card-img + .card-img-overlay
• .card-columns
• .card-deck
• .row-cols-1, .row-cols-2, .row-cols-3

📌 انواع چیدمان کارت‌ها در Bootstrap 4

1. Card Columns

• کلاس: .card-columns
• نمایش کارت‌ها به‌صورت ستونی شبیه Masonry layout
• مناسب برای کارت‌هایی با محتوای متنی/تصویری با ارتفاع متفاوت
• ضعف: در بعضی حالت‌ها رسپانسیو خوبی نداره

2. Card Deck

• کلاس: .card-deck
• کارت‌ها در یک ردیف و با ارتفاع برابر
• فاصله یکسان بین کارت‌ها
• مناسب برای کارت‌های مشابه و یکدست

3. Card Group

• کلاس: .card-group
• مشابه .card-deck اما کارت‌ها چسبیده به هم
• برای کارت‌هایی که ارتباط محتوایی نزدیک دارن

4. Row + Row Cols (روش مدرن‌تر)

• ساختار:

   

  <div class="row row-cols-1 row-cols-md-3">  <div class="col mb-4">    <div class="card">...</div>  </div> </div>

• .row-cols-1 → تک‌ستونه در موبایل
• .row-cols-md-3 → سه‌ستونه از سایز مدیوم به بالا
• انعطاف‌پذیر و رسپانسیو → جایگزین بهتر برای .card-deck و .card-columns

✅ جمع‌بندی سریع:

• محتوای نامنظم = Card Columns
• کارت‌های مشابه و فاصله‌دار = Card Deck
• کارت‌های مشابه و چسبیده = Card Group
• رسپانسیو و مدرن = Row + Row Cols