گروه لیست
پایه
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی با
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی با
- لورم ایپسوم متن ساختگی
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
آیتم های فعال
جهت استفاده کلاس .active
را اضافه کنید.
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی با
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی با
- لورم ایپسوم متن ساختگی
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item active">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
آیتم های غیر فعال
جهت استفاده کلاس .disabled
را اضافه کنید.
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی با
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی با
- لورم ایپسوم متن ساختگی
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
لینک ها و دکمه ها
<!-- Link -->
<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>
<a href="#" class="list-group-item list-group-item-action">...</a>
<a href="#" class="list-group-item list-group-item-action">...</a>
</div>
<!-- Button -->
<div class="list-group">
<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">...</button>
<button type="button" class="list-group-item list-group-item-action">...</button>
</div>
بدون دور خط
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی با
- لورم ایپسوم متن
- لورم ایپسوم متن ساختگی با
- لورم ایپسوم متن ساختگی
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
کلاس های کاربردی
- لورم ایپسوم متن ساختگی با تولید سادگی
- لورم ایپسوم متن ساختگی با تولید سادگی
- لورم ایپسوم متن ساختگی با تولید سادگی
- لورم ایپسوم متن ساختگی با تولید
- لورم ایپسوم متن ساختگی با تولید سادگی
- لورم ایپسوم متن ساختگی با تولید
- لورم ایپسوم متن ساختگی با تولید
- لورم ایپسوم متن ساختگی با تولید
- لورم ایپسوم متن ساختگی
- لورم ایپسوم متن ساختگی
- لورم ایپسوم متن ساختگی
- لورم ایپسوم متن ساختگی با تولید
- لورم ایپسوم متن ساختگی
- لورم ایپسوم متن ساختگی با تولید
- لورم ایپسوم متن ساختگی با تولید
<ul class="list-group">
<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>
<!-- Light -->
<ul class="list-group">
<li class="list-group-item list-group-item-primary-bright">...</li>
<li class="list-group-item list-group-item-secondary-bright">...</li>
<li class="list-group-item list-group-item-success-bright">...</li>
<li class="list-group-item list-group-item-danger-bright">...</li>
<li class="list-group-item list-group-item-warning-bright">...</li>
<li class="list-group-item list-group-item-info-bright">...</li>
<li class="list-group-item list-group-item-dark-bright">...</li>
</ul>
نشان دار
- لورم ایپسوم متن 14
- لورم ایپسوم متن ساختگی با 2
- لورم ایپسوم متن 1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
محتوای سفارشی
سرتیتر آیتم گروه لیست
3 روز پیشلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون
لورم ایپسوم متن ساختگی با تولیدسرتیتر آیتم گروه لیست
3 روز پیشلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون
لورم ایپسوم متن ساختگی با تولیدسرتیتر آیتم گروه لیست
3 روز پیشلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون
لورم ایپسوم متن ساختگی با تولید<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</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">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</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">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
با جاوا اسکریپت
<div class="row">
<div class="col-md-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" >Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" >Settings</a>
</div>
</div>
<div class="col-md-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>