-
-
-
-
- مدیر
جان اسمیت
فهرست
- خانه
- فهرست
لیست پایه
- یک آیتم
- یک مورد دوم
- یک مورد سوم
- یک مورد چهارم
- یک مورد پنجمی
<ul class="list-group">
<li class="list-group-item bg-white">یک آیتم</li>
<li class="list-group-item bg-white">یک مورد دوم</li>
<li class="list-group-item bg-white">یک مورد سوم</li>
<li class="list-group-item bg-white">یک مورد چهارم</li>
<li class="list-group-item bg-white">یک مورد پنجمی</li>
</ul>
لیست فعال
- یک آیتم فعال
- یک آیتم
- یک مورد دوم
- یک مورد سوم
- یک مورد چهارم
<ul class="list-group">
<li class="list-group-item active" aria-current="true">یک آیتم فعال</li>
<li class="list-group-item bg-white">یک آیتم</li>
<li class="list-group-item bg-white">یک مورد دوم</li>
<li class="list-group-item bg-white">یک مورد سوم</li>
<li class="list-group-item bg-white">یک مورد چهارم</li>
</ul>
لیست شماره گذاری
- عنوان فرعیمحتوا برای آیتم فهرست
- عنوان فرعیمحتوا برای آیتم فهرست
- عنوان فرعیمحتوا برای آیتم فهرست
<ol class="list-group list-group-numbered">
<li class="list-group-item bg-white 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 bg-white 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 bg-white 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>
فهرست انواع
- یک آیتم لیست پیش فرض ساده
- یک آیتم ساده در لیست اولیه
- یک آیتم گروهی ساده ثانویه
- یک آیتم ساده لیست موفقیت در گروه
- یک آیتم گروهی لیست خطر ساده
- یک آیتم گروهی لیست هشدار ساده
- یک آیتم گروهی لیست اطلاعات ساده
- یک آیتم گروهی لیست نور ساده
- یک آیتم ساده گروه لیست تاریک
<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>
محتوای دلخواه
<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>3 روز پیش</small>
</div>
<p class="mb-1">برخی از محتوای جایگیر در یک پاراگراف.</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-body-secondary">3 روز پیش</small>
</div>
<p class="mb-1">برخی از محتوای جایگیر در یک پاراگراف.</p>
<small class="text-body-secondary">و تعدادی چاپ کوچک خاموش.</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-body-secondary">3 روز پیش</small>
</div>
<p class="mb-1">برخی از محتوای جایگیر در یک پاراگراف.</p>
<small class="text-body-secondary">و تعدادی چاپ کوچک خاموش.</small>
</a>
</div>
</div>
بررسی جعبه ها و لیست رادیوها
<ul class="list-group">
<li class="list-group-item bg-white">
<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 bg-white">
<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 bg-white">
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
<label class="form-check-label" for="thirdCheckbox">چک باکس سوم</label>
</li>
</ul>