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

• Card

  • ساختار پایه:

     

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

  • کاربرد: نمایش محتوای منظم شامل متن، تصویر، دکمه، لیست و...
• Card-body (.card-body)
  • بخش اصلی محتوای کارت (متن، لینک، دکمه و...)
  • معمولاً داخل آن از کلاس‌های متن مثل .card-text, .card-title, .card-subtitle استفاده می‌شود.
• Card-header (.card-header)
  • برای عنوان یا سرستون کارت
  • می‌تواند متن ساده یا حتی المان‌هایی مثل دکمه و ناوبری داشته باشد.
• Blockquote در کارت
  • برای نقل‌قول‌ها
  • ترکیب با کلاس‌های:
    • .blockquote
    • .blockquote-footer (برای نویسنده یا منبع نقل‌قول)
• دکمه‌ها در کارت
  • استفاده از کلاس‌های عمومی دکمه بوت‌استرپ (.btn, .btn-primary, .btn-success, ...)
  • تغییر سایز با:
    • .btn-lg → بزرگ
    • .btn-sm → کوچک
    • .btn-block → دکمه تمام‌عرض
• گروه دکمه‌ها (Button Group)

  • ساختار:

     

    <div class="btn-group">
      <button class="btn btn-primary">Left</button>
      <button class="btn btn-primary">Middle</button>
      <button class="btn btn-primary">Right</button>
    </div>
    

  • برای قرار دادن چند دکمه کنار هم

⚡ نکته: در این جلسه تمرکز اصلی روی آشنایی با اجزای پایه کارت و نحوه ترکیب آن با دکمه‌ها و blockquote بوده.