گروه های لیست یک جزء منعطف و قدرتمند برای نمایش یک سری محتوا هستند. آنها را تغییر دهید و گسترش دهید تا تقریباً از هر محتوایی پشتیبانی شود.
.active
را به .list-group-item
اضافه کنید تا انتخاب فعال فعلی را نشان دهید.
.disabled
را به .list-group-item
اضافه کنید تا ظاهر غیرفعال شود. توجه داشته باشید که برخی از عناصر با .disabled
نیز برای غیرفعال کردن کامل رویدادهای کلیکی خود به جاوا اسکریپت سفارشی نیاز دارند (مانند پیوندها).
<a>
ها یا <button>
ها برای ایجاد موارد گروه عملی با حالت شناور، غیرفعال و فعال با اضافه کردن < استفاده کنید. code>.list-group-item-action. ما این شبه کلاسها را از هم جدا میکنیم تا مطمئن شویم گروههای فهرست ساخته شده از عناصر غیر تعاملی (مانند <li>
s یا <div>
s) کلیکی ارائه نمیکنند. یا روی استطاعت ضربه بزنید.
<button>
s، می توانید به جای کلاس .disabled
از ویژگی disabled
نیز استفاده کنید. متأسفانه، <a>
ها از ویژگی غیرفعال پشتیبانی نمیکنند.
.list-group-flush
را اضافه کنید تا برخی از حاشیهها و گوشههای گرد را حذف کنید تا موارد گروه فهرست را لبه به لبه در یک ظرف اصلی (مانند کارتها) ارائه کنید.
.list-group-numbered
را اضافه کنید (و به صورت اختیاری از عنصر <ol>
استفاده کنید) تا در موارد گروه لیست شماره گذاری شده شرکت کنید.
.list-group-horizontal
را اضافه کنید تا طرح بندی موارد گروه لیست را از عمودی به افقی در تمام نقاط شکست تغییر دهید. یا، یک نوع پاسخگو را انتخاب کنید .list-group-horizontal-{sm|md|lg|xl|xxl}
to make a list group horizontal starting at that breakpoint’s min-width
. Currently horizontal list groups cannot be combined with flush list groups.
.list-group-item-action
. به اضافه کردن سبک های شناور در اینجا توجه کنید که در مثال قبلی وجود ندارد. همچنین وضعیت .active
پشتیبانی می شود. آن را برای نشان دادن یک انتخاب فعال در یک آیتم گروه فهرست متنی اعمال کنید.
تا اون موقع دیگه نگران بارداریم نباشم. اما Maecenas به لبخندی متفاوت برای تملق نیاز دارد.
تا آن زمان درب من نیست.تا اون موقع دیگه نگران بارداریم نباشم. اما Maecenas به لبخندی متفاوت برای تملق نیاز دارد.
تا آن زمان درب من نیست.تا اون موقع دیگه نگران بارداریم نباشم. اما Maecenas به لبخندی متفاوت برای تملق نیاز دارد.
تا آن زمان درب من نیست.