مثال اساسی

ابتدایی ترین گروه لیست یک لیست نامرتب با لیست آیتم ها و کلاس های مناسب با گزینه های بعدی یا در صورت نیاز با CSS خود بر روی آن بسازید.

• گوگل درایو
• فیس بوک مسنجر
• اپل شرکت فناوری
• اینترکام سیستم پشتیبانی
• پی پال درگاه پرداخت

آیتم های فعال

اضافه کنید.activeبه a.list-group-itemبرای نشان دادن انتخاب فعال فعلی.

• گوگل درایو
• فیس بوک مسنجر
• اپل شرکت فناوری
• اینترکام سیستم پشتیبانی
• پی پال درگاه پرداخت

موارد غیر فعال

اضافه کنید.disabledبه a.list-group-itemبرای ساختن آنظاهر شوداز کار افتاده است.

• گوگل درایو
• فیس بوک مسنجر
• اپل شرکت فناوری
• اینترکام سیستم پشتیبانی
• پی پال درگاه پرداخت

لینک ها و دکمه ها

استفاده کنید<a>s یا<button>برای ایجادقابل اجرالیست موارد گروه با حالت شناور، غیرفعال و فعال را با اضافه کردن.list-group-item-action.

فلاش

اضافه کنید.list-group-flushبرای حذف برخی حاشیه ها و گوشه های گرد برای رندر کردن موارد گروهی لیست لبه به لبه در والد ظرف (به عنوان مثال، کارت).

• گوگل درایو
• فیس بوک مسنجر
• شرکت فناوری اپل
• سیستم پشتیبانی اینترکام
• درگاه پرداخت پی پال

افقی

اضافه کنید.list-group-horizontalبرای تغییر دادن چیدمان لیست موارد را از عمودی به افقی در تمام نقاط شکست گروه بندی می کند. از طرف دیگر، یک نوع پاسخگو را انتخاب کنید.list-group-horizontal-{sm|md|lg|xl}برای ایجاد یک گروه لیست افقی که از آن نقطه شکست شروع می شودmin-width.

• گوگل
• واتساپ
• فیس بوک

• اپل
• پی پال
• اینترکام

• گوگل
• واتساپ
• فیس بوک

کلاس های متنی

از کلاس های متنی برای استایل دادن به آیتم های لیست با a استفاده کنید پس زمینه و رنگ حالت دار

• پروتئین ها و چربی ها در
• یک ابتدایی ساده لیست مورد گروه
• یک ثانویه ساده لیست مورد گروه
• یک موفقیت ساده لیست مورد گروه
• یک لیست خطر ساده مورد گروه
• یک هشدار ساده لیست مورد گروه
• یک لیست اطلاعات ساده مورد گروه
• یک لیست نوری ساده مورد گروه
• یک لیست تاریک ساده مورد گروه

کلاس های متنی با لینک

از کلاس های متنی برای استایل دادن به آیتم های لیست با a استفاده کنید پس زمینه و رنگ حالت دار

محتوای سفارشی

تقریباً هر HTML را در داخل اضافه کنید، حتی برای لیست پیوندی گروه هایی مانند زیر، با کمک برنامه های کاربردی flexbox.

با نشان ها

برای نشان دادن خوانده نشده به هر مورد گروه لیست نشان اضافه کنید شمارش، فعالیت و موارد دیگر با کمک برخی ابزارهای کمکی.

• ایمیل های جیمیل14
• پرداخت های معلق2
• اقدام مورد نیاز99+
• پرداخت ها انجام شد20+
• پرداخت های معلق12

چک باکس ها و رادیوها

چک باکس ها و رادیوهای Bootstrap را در لیست قرار دهید موارد را گروه بندی کنید و در صورت نیاز سفارشی کنید. می توانید بدون استفاده از آنها استفاده کنید<label>s، اما لطفاً به یاد داشته باشید که عبارت را نیز درج کنیدaria-labelویژگی و مقدار برای دسترسی

• اول چک باکس
• دوم چک باکس

• رادیو اول
• دوم رادیو

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

اعداد توسطcounter-resetدر را<ol>، و سپس استایل دهی شده و با a قرار می گیرد::beforeشبه عنصر در<li>باcounter-incrementوcontent.

1. مدیر Jidox

   مدیر Jidox
   865
2. Jidox React Admin

   Jidox React Admin
   140
3. نسخه زاویه ای

   نسخه زاویه ای
   85