🎨 Bootstrap 5 – Components (بخش اول)

🟢 Accordion

• ✅ کلاس‌ها:
  • accordion
  • accordion-item
  • accordion-header
  • accordion-button
  • accordion-collapse
• ⚡ کارکرد:
  • data-bs-toggle="collapse"
  • data-bs-target="#id"
  • aria-controls="#id"
  • data-bs-parent="#accordionExample" → فقط یک آکاردئون باز
• ❗ نکته عملی: ID‌ها باید یونیک باشند و parent تنظیم شود؛ در غیر این صورت تداخل و کانفلیکت رخ می‌دهد

🔵 Alert

• ✅ کلاس‌ها:
  • alert
  • alert-primary / alert-success / alert-warning / alert-danger
  • چیدمان: d-flex align-items-center
  • بستن: alert-dismissible, fade, show, دکمه: btn-close, data-bs-dismiss="alert"
• ❗ نکته عملی:
  • SVG Icon بعضی مواقع خیلی بزرگ می‌شود → سایز دستی لازم است
  • رنگ آیکون Alert گاهی اعمال نمی‌شود → symbol fill="currentColor"

🟡 Badge

• ✅ کلاس‌ها:
  • پایه: badge
  • رنگ‌ها: bg-primary, bg-success, bg-danger, …
  • حالت قرصی: rounded-pill
• ✅ استفاده همراه دکمه امکان‌پذیر است

🟠 Breadcrumb

• ✅ ساختار:
  • <nav aria-label="breadcrumb">
  • <ol class="breadcrumb">
  • <li class="breadcrumb-item">
• ⚡ آیتم فعال: active, aria-current="page"

🔴 Button

• ✅ کلاس‌ها:
  • پایه: btn
  • رنگ‌ها: btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-dark
  • اندازه‌ها: btn-sm, btn-lg
  • Outline: btn-outline-primary و مشابه

🟣 Button Group

• ✅ کلاس‌ها:
  • btn-group, btn-group-vertical
  • اندازه: btn-group-sm, btn-group-lg

💡 تجربیات عملی جلسه

• آکاردئون‌ها بدون ID یونیک یا parent درست → تداخل دارند
• Alert ها:
  • SVG Icon خیلی بزرگ → دستی کوچک شود
  • رنگ Icon اعمال نمی‌شود → داخل symbol fill="currentColor" بدهید