📌 در بوت‌استرپ ۵ می‌تونیم مجموعه‌ای از آیتم‌ها رو داخل یک لیست مرتب و زیبا نمایش بدیم. این ویژگی برای منوها، لیست‌های انتخاب، و نمایش داده‌ها کاربرد داره.

✅ ساختار پایه

<ul class="list-group">
  <li class="list-group-item">آیتم اول</li>
  <li class="list-group-item">آیتم دوم</li>
  <li class="list-group-item">آیتم سوم</li>
</ul>

✅ آیتم فعال و غیرفعال

<ul class="list-group">
  <li class="list-group-item active">آیتم فعال</li>
  <li class="list-group-item">آیتم عادی</li>
  <li class="list-group-item disabled">آیتم غیرفعال</li>
</ul>

• .active → آیتم انتخاب‌شده

• .disabled → آیتم غیرفعال

✅ لیست لینک‌دار

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">خانه</a>
  <a href="#" class="list-group-item list-group-item-action">پروفایل</a>
  <a href="#" class="list-group-item list-group-item-action">تنظیمات</a>
</div>

✅ رنگ‌ها (Contextual Classes)

می‌تونیم برای آیتم‌ها رنگ‌های مختلف بذاریم:

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary</li>
  <li class="list-group-item list-group-item-success">Success</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
  <li class="list-group-item list-group-item-warning">Warning</li>
  <li class="list-group-item list-group-item-info">Info</li>
  <li class="list-group-item list-group-item-light">Light</li>
  <li class="list-group-item list-group-item-dark">Dark</li>
</ul>

✅ لیست افقی (Horizontal)

با استفاده از .list-group-horizontal:

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">آیتم ۱</li>
  <li class="list-group-item">آیتم ۲</li>
  <li class="list-group-item">آیتم ۳</li>
</ul>

همچنین می‌تونی سایز ریسپانسیو بدی:

• .list-group-horizontal-sm

• .list-group-horizontal-md

• .list-group-horizontal-lg

✅ لیست همراه با Badge (نشانگر)

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    پیام‌ها
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    اعلان‌ها
    <span class="badge bg-danger rounded-pill">7</span>
  </li>
</ul>

✅ نکات مهم

• list-group-item-action آیتم‌ها رو قابل کلیک می‌کنه.

• می‌شه از button به جای a یا li هم استفاده کرد.

• ترکیبش با Badge خیلی پرکاربرده.