فهرست

لیست پایه

  • یک آیتم
  • یک مورد دوم
  • یک مورد سوم
  • یک مورد چهارم
  • یک مورد پنجمی

<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>

لیست شماره گذاری

  1. عنوان فرعی
    محتوا برای آیتم فهرست
    14
  2. عنوان فرعی
    محتوا برای آیتم فهرست
    14
  3. عنوان فرعی
    محتوا برای آیتم فهرست
    14

<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>