ابتدایی#
سادهترین نوع گروه لیست، یک لیست نامرتب با عناصر لیست و کلاس های مناسب است. بر اساس آن با گزینههای زیر یا با CSS خودتان بسازید.
- یک مورد
- مورد دوم
- مورد سوم
- مورد چهارم
- و یک مورد پنجم
<ul class="list-group">
<li class="list-group-item">یک مورد</li>
<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 .active اضافه کنید تا انتخاب فعال فعلی را نشان دهد.
- یک مورد فعال
- مورد دوم
- مورد سوم
- مورد چهارم
- و یک مورد پنجم
<ul class="list-group">
<li class="list-group-item active" aria-current="true">یک مورد فعال</li>
<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 .disabled اضافه کنید تا آن را غیرفعال نشان دهد. توجه داشته باشید که برخی از عناصر با .disabled برای غیرفعال کردن کامل رویدادهای کلیکی خود به JavaScript سفارشی نیاز دارند (مثلاً لینکها).
- یک مورد غیرفعال
- مورد دوم
- مورد سوم
- مورد چهارم
- و یک مورد پنجم
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">یک مورد غیرفعال</li>
<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>
لینکها و دکمهها#
برای ایجاد عناصر قابل اقدام گروه لیست با حالتهای hover، غیرفعال و فعال از <a> یا <button> استفاده کنید با اضافه کردن .list-group-item-action. ما این کلاسهای شبه را جدا کردیم تا اطمینان حاصل کنیم که گروههای لیست ساخته شده از عناصر غیرقابل تعامل (مانند <li> یا <div>) امکان کلیک یا لمس را ندارند.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
عنصر لینک فعلی
</a>
<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>
<a class="list-group-item list-group-item-action disabled">مورد غیرفعال لینک</a>
</div>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
دکمه فعلی
</button>
<button type="button" class="list-group-item list-group-item-action">مورد دوم دکمه</button>
<button type="button" class="list-group-item list-group-item-action">مورد سوم دکمه</button>
<button type="button" class="list-group-item list-group-item-action">مورد چهارم دکمه</button>
<button type="button" class="list-group-item list-group-item-action" disabled>مورد غیرفعال دکمه</button>
</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>
<li class="list-group-item">و یک مورد پنجم</li>
</ul>
شمارهگذاری شده#
کلاس اصلاحی .list-group-numbered را اضافه کنید (و به صورت اختیاری از عنصر <ol> استفاده کنید) تا موارد گروه لیست شمارهگذاریشده را انتخاب کنید. شمارهها از طریق CSS تولید میشوند (در مقایسه با استایل پیشفرض مرورگر برای <ol>) تا قرارگیری بهتری در داخل موارد گروه لیست فراهم آورده و امکان سفارشیسازی بهتری را ارائه دهند.
شمارهها با استفاده از counter-reset روی <ol> تولید میشوند و سپس با استفاده از یک عنصر شبه ::before روی <li> با counter-increment و content استایلدهی و قرار داده میشوند.
- یک مورد لیست
- یک مورد لیست
- یک مورد لیست
-
14زیر عنوانمحتوای برای مورد لیست
-
14زیر عنوانمحتوای برای مورد لیست
-
14زیر عنوانمحتوای برای مورد لیست
<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>
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">زیر عنوان</div>
محتوای برای مورد لیست
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">زیر عنوان</div>
محتوای برای مورد لیست
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">زیر عنوان</div>
محتوای برای مورد لیست
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
افقی#
برای تغییر ترتیب موارد گروه لیست از عمودی به افقی در همه نقطه شکسته، .list-group-horizontal را اضافه کنید. به طور جایگزین، یک نوع پاسخگو .list-group-horizontal-{sm|md|lg|xl|xxl} انتخاب کنید تا گروه لیستی افقی را از min-width این نقطه شکسته آغاز کنید. در حال حاضر گروههای لیست افقی نمیتوانند با گروههای لیست فشرده ترکیب شوند.
نکته حرفهای: آیا میخواهید موارد گروه لیست وقتی افقی هستند، عرض یکسان داشته باشند؟ به هر مورد گروه لیست .flex-fill اضافه کنید.
- یک مورد
- مورد دوم
- مورد سوم
- یک مورد
- مورد دوم
- مورد سوم
- یک مورد
- مورد دوم
- مورد سوم
- یک مورد
- مورد دوم
- مورد سوم
- یک مورد
- مورد دوم
- مورد سوم
- یک مورد
- مورد دوم
- مورد سوم
<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>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">یک مورد</li>
<li class="list-group-item">مورد دوم</li>
<li class="list-group-item">مورد سوم</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">یک مورد</li>
<li class="list-group-item">مورد دوم</li>
<li class="list-group-item">مورد سوم</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">یک مورد</li>
<li class="list-group-item">مورد دوم</li>
<li class="list-group-item">مورد سوم</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">یک مورد</li>
<li class="list-group-item">مورد دوم</li>
<li class="list-group-item">مورد سوم</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<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">یک مورد گروه لیست پیشفرض ساده</li>
<li class="list-group-item list-group-item-primary">یک مورد گروه لیست اولیه ساده</li>
<li class="list-group-item list-group-item-secondary">یک مورد گروه لیست ثانویه ساده</li>
<li class="list-group-item list-group-item-success">یک مورد گروه لیست موفقیتآمیز ساده</li>
<li class="list-group-item list-group-item-danger">یک مورد گروه لیست خطرناک ساده</li>
<li class="list-group-item list-group-item-warning">یک مورد گروه لیست هشدار ساده</li>
<li class="list-group-item list-group-item-info">یک مورد گروه لیست اطلاعاتی ساده</li>
<li class="list-group-item list-group-item-light">یک مورد گروه لیست روشن ساده</li>
<li class="list-group-item list-group-item-dark">یک مورد گروه لیست تیره ساده</li>
</ul>
محتوای سفارشی#
بیشتر محتوای HTML را با کمک ابزارهای Flexbox درون افزودن کنید، حتی برای گروههای لیست متصل مانند زیر.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">عنوان مورد گروه لیست</h5>
<small>۳ روز پیش</small>
</div>
<p class="mb-1">محتوای placeholder در یک پاراگراف.</p>
<small>و برخی نوشتههای کوچک.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">عنوان مورد گروه لیست</h5>
<small class="text-muted">۳ روز پیش</small>
</div>
<p class="mb-1">محتوای placeholder در یک پاراگراف.</p>
<small class="text-muted">و برخی نوشتههای کوچک بیصدا.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">عنوان مورد گروه لیست</h5>
<small class="text-muted">۳ روز پیش</small>
</div>
<p class="mb-1">محتوای placeholder در یک پاراگراف.</p>
<small class="text-muted">و برخی نوشتههای کوچک بیصدا.</small>
</a>
</div>
چک باکسها و رادیوها#
چک باکسها و رادیوهای Bootstrap را درون موارد گروه لیست قرار دهید و به محض نیاز آنها را سفارشی کنید. میتوانید از آنها بدون <label> استفاده کنید، اما لطفاً به یاد داشته باشید که ویژگی aria-label و مقدار آن را برای دسترسی در نظر بگیرید.
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
<label class="form-check-label" for="firstCheckbox">چک باکس اول</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
<label class="form-check-label" for="secondCheckbox">چک باکس دوم</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
<label class="form-check-label" for="thirdCheckbox">چک باکس سوم</label>
</li>
</ul>