گروه لیست
مثال پایه
ابتدایی ترین گروه لیست یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است. با گزینههای زیر، یا در صورت نیاز با CSS خودتان، آن را بسازید.
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
آیتم های فعال
برای نشان دادن انتخاب فعال فعلی، .activeبه a اضافه کنید..list-group-item
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
موارد غیر فعال
.disabledبه a اضافه کنید .list-group-itemتا غیرفعال به نظر برسد.
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
لینک ها و دکمه ها
از <a>s یا <button>s برای ایجاد آیتم های گروه لیست قابل اجرا با حالت شناور، غیرفعال و فعال با افزودن .list-group-item-actionاستفاده کنید.
فلاش
اضافه .list-group-flushکنید تا برخی از حاشیهها و گوشههای گرد را حذف کنید تا موارد گروهی فهرست به صورت لبه به لبه در ظرف اصلی (مثلاً کارتها) ارائه شود.
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
افقی
.list-group-horizontalبرای تغییر طرح بندی آیتم های گروه لیست از عمودی به افقی در تمام نقاط شکست، اضافه کنید. از طرف دیگر، یک نوع پاسخگو را انتخاب کنید .list-group-horizontal-{sm|md|lg|xl}تا یک گروه لیست به صورت افقی در آن نقطه شکست شروع شود min-width.
- گوگل
- واتساپ
- فیس بوک
- سیب
- پی پال
- اینترکام
- گوگل
- واتساپ
- فیس بوک
کلاس های متنی
از کلاس های متنی برای استایل دادن به آیتم های لیست با پس زمینه و رنگ حالت دار استفاده کنید.
- Dapibus ac facilisis in
- یک آیتم ساده در لیست اولیه
- یک آیتم گروهی ساده ثانویه
- یک آیتم ساده لیست موفقیت در گروه
- یک آیتم گروهی لیست خطر ساده
- یک آیتم گروهی لیست هشدار ساده
- یک آیتم گروهی لیست اطلاعات ساده
- یک آیتم گروهی لیست نور ساده
- یک آیتم گروهی ساده در لیست تاریک
کلاس های متنی با لینک
از کلاس های متنی برای استایل دادن به آیتم های لیست با پس زمینه و رنگ حالت دار استفاده کنید.
محتوای دلخواه
تقریباً هر HTML را در داخل اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر، با کمک ابزارهای flexbox.
عنوان مورد گروه را فهرست کنید
3 روز پیشلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.عنوان مورد گروه را فهرست کنید
3 روز پیشلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.عنوان مورد گروه را فهرست کنید
3 روز پیشلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.با نشان ها
برای نشان دادن تعداد خوانده نشده، فعالیت و موارد دیگر با کمک برخی ابزارهای کمکی، نشانها را به هر مورد از گروه فهرست اضافه کنید.
- ایمیل های جیمیل 14
- پرداخت های معلق 2
- اقدام مورد نیاز 99+
- پرداخت ها انجام شد 20
- پیام های 16+
چک باکس ها و رادیوها
و اگر میخواهید <label>s را بهعنوان .list-group-itemمنطقهای با ضربه بزرگ انتخاب کنید، میتوانید این کار را نیز انجام دهید.
- اولین چک باکس
- چک باکس دوم
- چک باکس سوم
- چک باکس چهارم
- چک باکس پنجم
لیست شماره گذاری شده
اعداد توسط counter-resetروی ایجاد میشوند <ol>و سپس استایلبندی میشوند و با یک ::beforeعنصر شبه روی <li>با counter-incrementو contentقرار میگیرند.
-
14عنوان فرعیکراس فقط اودیو
-
14عنوان فرعیکراس فقط اودیو
-
14عنوان فرعیکراس فقط اودیو
