گروه لیست
مثال اساسی
ابتدایی ترین گروه لیست یک لیست نامرتب با لیست آیتم ها و کلاس های مناسب با گزینه های بعدی یا در صورت نیاز با 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.
عنوان مورد گروه را فهرست کنید
3 روز پیشتا اون موقع دیگه نگران بارداریم نباشم. اما Maecenas به لبخندی متفاوت برای تملق نیاز دارد.
تا آن زمان درب من نیست.عنوان مورد گروه را فهرست کنید
3 روز پیشتا اون موقع دیگه نگران بارداریم نباشم. اما Maecenas به لبخندی متفاوت برای تملق نیاز دارد.
تا آن زمان درب من نیست.عنوان مورد گروه را فهرست کنید
3 روز پیشتا اون موقع دیگه نگران بارداریم نباشم. اما Maecenas به لبخندی متفاوت برای تملق نیاز دارد.
تا آن زمان درب من نیست.با نشان ها
برای نشان دادن خوانده نشده به هر مورد گروه لیست نشان اضافه کنید شمارش، فعالیت و موارد دیگر با کمک برخی ابزارهای کمکی.
- ایمیل های جیمیل14
- پرداخت های معلق2
- اقدام مورد نیاز99+
- پرداخت ها انجام شد20+
- پرداخت های معلق12
چک باکس ها و رادیوها
چک باکس ها و رادیوهای Bootstrap را در لیست قرار دهید موارد را گروه بندی کنید و در صورت نیاز سفارشی کنید. می توانید بدون استفاده از آنها استفاده کنید<label>s، اما لطفاً به یاد داشته باشید که عبارت را نیز درج کنیدaria-labelویژگی و مقدار برای دسترسی
شماره گذاری شده است
اعداد توسطcounter-resetدر را<ol>، و سپس استایل دهی شده و با a قرار می گیرد::beforeشبه عنصر در<li>باcounter-incrementوcontent.
- 865ادمین ولونیکادمین ولونیک
- 140Velonic React AdminVelonic React Admin
- 85نسخه زاویه اینسخه زاویه ای