گروه های لیست (List Groups)

«گروه های لیست بوت استرپ» آیتم ها را مرتب و یکدست نمایش می دهد. مثل فهرست کارهای روزانه در موبایل. هر ردیف یک کار است و ظاهر یکسان دارد.

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

برای ساخت نسخه پایه، روی <ul> کلاس .list-group بگذار. سپس روی هر <li> کلاس .list-group-item بده.

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

مشاهده در ادیتور

آیتم فعال (Active)

برای برجسته کردن ردیف فعلی، کلاس .active را اضافه کن.

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

مشاهده در ادیتور

آیتم های لینک دار

اگر آیتم ها لینک هستند، از <div> و تگ <a> استفاده کن. برای افکت هاور، .list-group-item-action بگذار.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

مشاهده در ادیتور

آیتم غیرفعال (Disabled)

برای غیرفعال کردن لینک یا آیتم، از .disabled استفاده کن. این کلاس رنگ را کمرنگ می کند و هاور را برمی دارد.

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

مشاهده در ادیتور

حذف بردرها (Flush)

برای حذف بعضی بردرها و گردی ها، از .list-group-flush کمک بگیر.

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

مشاهده در ادیتور

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

برای شماره خودکار، از .list-group-numbered استفاده کن. معمولاً با <ol> می آید.

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ol>

مشاهده در ادیتور

لیست افقی

برای افقی شدن آیتم ها، روی ظرف .list-group کلاس .list-group-horizontal بگذار.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

مشاهده در ادیتور

رنگ های زمینه آیتم ها

برای رنگ دهی، از کلاس های زمینه مانند .list-group-item-success و … استفاده کن.

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

مشاهده در ادیتور

لینک ها با رنگ زمینه

می توانی همین رنگ ها را روی لینک های لیست هم اعمال کنی.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

مشاهده در ادیتور

نشان ها (Badges)

برای شمارنده کنار هر آیتم، از .badge با ابزارهای چیدمان استفاده کن.

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

مشاهده در ادیتور

نکته: پیش از کار با کارت ها، گروه های لیست بوت استرپ را خوب تمرین کن. همچنین صفحه صفحه بندی و نوارهای پیشرفت مکمل خوبی هستند.

گام های تمرینی

1. یک لیست پایه بساز و سه آیتم بگذار.
2. آیتم دوم را فعال کن و استایلش را ببین.
3. نسخه لینک دار با .list-group-item-action بساز.
4. یک آیتم را غیرفعال کن و نتیجه را بررسی کن.
5. لیست افقی و شماره دار را امتحان کن.

جمع بندی سریع

• .list-group ظرف است و آیتم ها .list-group-item هستند.
• .active برای برجسته کردن آیتم فعلی است.
• .disabled آیتم را غیرفعال و کمرنگ می کند.
• .list-group-numbered شماره خودکار می سازد.
• رنگ ها با کلاس های زمینه اعمال می شوند.