اساسی

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

آیتم های فعال

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

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

.disabledبه a اضافه کنید .list-group-item تا غیرفعال به نظر برسد . توجه داشته باشید که برخی از عناصر دارای .disabledجاوا اسکریپت سفارشی نیز برای غیرفعال کردن کامل رویدادهای کلیک خود (مثلاً پیوندها) نیاز دارند.

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

<a>از s یا <button>s برای ایجاد موارد گروهی لیست قابل اجرا با حالت شناور، غیرفعال و فعال با افزودن استفاده کنید .list-group-item-action. ما این شبه کلاس‌ها را از هم جدا می‌کنیم تا مطمئن شویم گروه‌های فهرست ساخته شده از عناصر غیر تعاملی (مانند <li>s یا <div>s) امکان کلیک یا ضربه را فراهم نمی‌کنند.

فلاش

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

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

Add the .list-group-numbered modifier class (and optionally use an <ol> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list group items and to allow for better customization.

Numbers are generated by counter-reset on the <ol>, and then styled and placed with a ::before pseudo-element on the <li> with counter-increment and content.

افقی

برای تغییر طرح بندی آیتم های گروه لیست از عمودی به افقی در تمام نقاط شکست، .list-group-horizontal را اضافه کنید. از طرف دیگر، یک نوع پاسخگو .list-group-horizontal-{sm|md|lg|xl|xxl} را انتخاب کنید تا یک گروه لیست به صورت افقی با عرض حداقل آن نقطه شکست شروع شود. در حال حاضر گروه‌های فهرست افقی را نمی‌توان با گروه‌های فهرست همسطح ترکیب کرد. نکته: آیا می‌خواهید در حالت افقی، آیتم‌های فهرست با عرض یکسان را گروه‌بندی کنید؟ Flex-fill را به هر مورد از لیست اضافه کنید.

کلاس های متنی

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

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

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

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

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