گروه‌های لیست
گروه های لیست ساده
برای ایجاد یک گروه لیست ساده، از عنصر <ul> با کلاس .list-group و عنصرهای <li> با کلاس .list-group-item استفاده کنید:[۱]
مثال
1 <ul class="list-group">
2 <li class="list-group-item">First item</li>
3 <li class="list-group-item">Second item</li>
4 <li class="list-group-item">Third item</li>
5 </ul>
حالت فعال
از کلاس ..active برای برجسته کردن آیتم فعلی استفاده می‌شود:
مثال
1 <ul class="list-group">
2 <li class="list-group-item active">Active item</li>
3 <li class="list-group-item">Second item</li>
4 <li class="list-group-item">Third item</li>
5 </ul>
گروه لیست با آیتمهای لینک شده
برای ایجاد یک گروه لیست با آیتمهای لینک شده، از <div> بجای <ul> و از <a> بجای <li> استفاده کنید. اگر می خواهید با پیمایش ماوس، رنگ پیش زمینه، طوسی شود، می توانید به دلخواه کلاس .list-group-item-action را اضافه کنید:
مثال
1 <div class="list-group">
2 <a href="#" class="list-group-item list-group-item-action">First item</a>
3 <a href="#" class="list-group-item list-group-item-action">Second item</a>
4 <a href="#" class="list-group-item list-group-item-action">Third item</a>
5 </div>
آیتم غیرفعال
کلاس .disabled به آیتم غیرفعال رنگ متن روشن تری را اضافه می‌کند؛ و وقتی برای لینک‌ها استفاده شود، حالت hover را حذف می‌کند:
مثال
1 <div class="list-group">
2 <a href="#" class="list-group-item disabled">Disabled item</a>
3 <a href="#" class="list-group-item disabled">Disabled item</a>
4 <a href="#" class="list-group-item">Third item</a>
5 </div>
کادرهای Flush / Remove
می‌توان از کلاس .list-group-flush برای حذف کادرها و گوشه‌های گِرد استفاده کرد:
مثال
1 <ul class="list-group list-group-flush">
2 <li class="list-group-item">First item</li>
3 <li class="list-group-item">Second item</li>
4 <li class="list-group-item">Third item</li>
5 <li class="list-group-item">Fourth item</li>
6 </ul>
گروه لیست های افقی
اگر بخواهید آیتمهای لیست بجای عمودی، بصورت افقی نمایش داده شوند (کنار هم بجای بالای یکدیگر)، کلاس .list-group-horizontal را به .list-group اضافه کنید:
مثال
1 <ul class="list-group list-group-horizontal">
2 <li class="list-group-item">First item</li>
3 <li class="list-group-item">Second item</li>
4 <li class="list-group-item">Third item</li>
5 <li class="list-group-item">Fourth item</li>
6 </ul>
کلاسهای متنی
کلاسهای متنی را می‌توان برای رنگ آمیزی آیتمهای لیست استفاده کرد:
کلاسهای رنگ کردن آیتمهای لیست عبارتند از: .list-group-item-success ,list-group-item-secondary ,list-group-item-nfo ,list-group-item-warning , .list-group-item-danger ,.list-group-item-primary ,list-group-item-dark و list-group-item-light:
مثال
1 <ul class="list-group">
2 <li class="list-group-item list-group-item-success">Success item</li>
3 <li class="list-group-item list-group-item-secondary">Secondary item</li>
4 <li class="list-group-item list-group-item-info">Info item</li>
5 <li class="list-group-item list-group-item-warning">Warning item</li>
6 <li class="list-group-item list-group-item-danger">Danger item</li>
7 <li class="list-group-item list-group-item-primary">Primary item</li>
8 <li class="list-group-item list-group-item-dark">Dark item</li>
9 <li class="list-group-item list-group-item-light">Light item</li>
10 </ul>
آیتم های لینک با کلاسهای متنی
مثال
1 <div class="list-group">
2 <a href="#" class="list-group-item list-group-item-action">Action item</a>
3 <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
4 <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
5 <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
6 <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
7 <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
8 <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
9 <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
10 <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
11 </div>
گروه لیست دارای نشان ها
برای اضافه کردن نشان‌ها داخل گروه لیست، کلاسهای .badge را با کلاسهای helper/کاربردی ترکیب کنید:
مثال
1 <ul class="list-group">
2 <li class="list-group-item d-flex justify-content-between align-items-center">
3 Inbox
4 <span class="badge badge-primary badge-pill">12</span>
5 </li>
6 <li class="list-group-item d-flex justify-content-between align-items-center">
7 Ads
8 <span class="badge badge-primary badge-pill">50</span>
9 </li>
10 <li class="list-group-item d-flex justify-content-between align-items-center">
11 Junk
12 <span class="badge badge-primary badge-pill">99</span>
13 </li>
14 </ul>
منابع آموزشی