گروه‌های لیست Bootstrap 5

لیست گروه‌های پایه

لیست گروه‌های پایه‌ترین شامل لیست‌های بدون نظم و آیتم‌ها هستند:

برای ایجاد لیست گروه‌های پایه، از کلاس .list-group از <ul> عنصر و کلاس .list-group-item از <li> عنصر:

مثال

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

خودتان امتحان کنید

وضعیت فعال

استفاده کنید .active برای برجسته‌سازی مورد فعال از

مثال

<ul class="list-group">
  <li class="list-group-item active">مورد فعال</li>
  <li class="list-group-item">مورد دوم</li>
  <li class="list-group-item">مورد سوم</li>
</ul>

خودتان امتحان کنید

لیست گروه‌های شامل لینک

برای ایجاد لیست گروه‌های دارای لینک، از <div> به جای <ul>، با <a> به جای <li>اختیاراً، اگر می‌خواهید پس‌زمینه خاکستری در حالت تردد اضافه کنید، لطفاً .list-group-item-action دسته:

مثال

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">اولین</a>
  <a href="#" class="list-group-item list-group-item-action">دوماً</a>
  <a href="#" class="list-group-item list-group-item-action">مورد سوم</a>
</div>

خودتان امتحان کنید

مورد غیرفعال

.disabled کلاس برای اضافه کردن رنگ کم‌رنگ به موارد غیرفعال استفاده می‌کند. هنگام استفاده در لینک، اثر جلو رفتن (hover) حذف می‌شود:

مثال

<div class="list-group">
  <a href="#" class="list-group-item disabled">مورد غیرفعال</a>
  <a href="#" class="list-group-item disabled">مورد غیرفعال</a>
  <a href="#" class="list-group-item">مورد سوم</a>
</div>

خودتان امتحان کنید

حذف حاشیه

استفاده از .list-group-flush کلاس برای حذف حاشیه و گوشه‌ها استفاده می‌شود:

مثال

<ul class="list-group list-group-flush">
  <li class="list-group-item">مورد اول</li>
  <li class="list-group-item">مورد دوم</li>
  <li class="list-group-item">مورد سوم</li>
  <li class="list-group-item">مورد چهارم</li>
</ul>

خودتان امتحان کنید

لیست شماره‌دار

استفاده از .list-group-numbered کلاس ایجاد می‌کند که موارد لیست با شماره‌های اولیه نمایش داده شوند:

مثال

<ol class="list-group list-group-numbered">
  <li class="list-group-item">مورد اول</li>
  <li class="list-group-item">مورد دوم</li>
  <li class="list-group-item">مورد سوم</li>
</ol>

خودتان امتحان کنید

لیست افقی

اگر می‌خواهید موارد لیست به صورت افقی نمایش داده شوند (کنار هم به جای روی هم قرار دادن)، لطفاً .list-group-horizontal به .list-group:

مثال

<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>
  <li class="list-group-item">مورد چهارم</li>
</ul>

خودتان امتحان کنید

کلاس‌های محیطی

کلاس‌های محیطی برای اضافه کردن رنگ به موارد لیست استفاده می‌شوند:

کلاس‌هایی که برای رنگ‌دهی موارد لیست استفاده می‌شوند:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

مثال

<ul class="list-group">
  <li class="list-group-item list-group-item-success">موفقیت‌آمیز</li>
  <li class="list-group-item list-group-item-secondary">آیتم ثانویه</li>
  <li class="list-group-item list-group-item-info">آیتم اطلاعات</li>
  <li class="list-group-item list-group-item-warning">آیتم اخطار</li>
  <li class="list-group-item list-group-item-danger">آیتم خطرناک</li>
  <li class="list-group-item list-group-item-primary">آیتم اصلی</li>
  <li class="list-group-item list-group-item-dark">آیتم تاریک</li>
  <li class="list-group-item list-group-item-light">آیتم روشن</li>
</ul>

خودتان امتحان کنید

لینک پروژه‌ای با کلاس‌های متنوع

مثال

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">آیتم عمل</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">آیتم موفقیت</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">آیتم ثانویه</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">آیتم اطلاعات</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">اخطار آیتم</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">مورد خطر</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">مورد اصلی</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">مورد تاریک</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">مورد روشن</a>
</div>

خودتان امتحان کنید

لیست گروه با نشانک

انتخاب کنید .badge با ترکیب class و utility/helper می‌توانید نشانک‌ها را به لیست گروه اضافه کنید:

مثال

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    صندوق ورودی
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    ایمیل‌های تبلیغاتی
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    کورسوه
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

خودتان امتحان کنید