گروه‌های لیست

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

گروه های لیست ساده

برای ایجاد یک گروه لیست ساده، از عنصر <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>


مشاهدهٔ نتیجه


نکته: در مورد کلاس‌های Helper / کاربردی در بخش BS4 Utilities بیشتر بخوانید.


منابع آموزشی