گروه لیست
مثال پایه
ابتدایی ترین گروه لیست یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است. با گزینههای زیر، یا در صورت نیاز با CSS خودتان، آن را بسازید.
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
آیتم های فعال
برای نشان دادن انتخاب فعال فعلی، .activeبه a اضافه کنید..list-group-iteمیلیون
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
موارد غیر فعال
.disabledبه a اضافه کنید .list-group-iteمیلیونتا غیرفعال به نظر برسد.
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
لینک ها و دکمه ها
از <a>s یا <button>s برای ایجاد آیتم های گروه لیست قابل اجرا با حالت شناور، غیرفعال و فعال با افزودن .list-group-item-actionاستفاده کنید.
فلاش
اضافه .list-group-flushکنید تا برخی از حاشیهها و گوشههای گرد را حذف کنید تا موارد گروهی فهرست به صورت لبه به لبه در ظرف اصلی (مثلاً کارتها) ارائه شود.
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
افقی
.list-group-horizontalبرای تغییر طرح بندی آیتم های گروه لیست از عمودی به افقی در تمام نقاط شکست، اضافه کنید. از طرف دیگر، یک نوع پاسخگو را انتخاب کنید .list-group-horizontal-{sm|md|lg|xl}تا یک گروه لیست به صورت افقی در آن نقطه شکست شروع شود min-width.
- گوگل
- واتساپ
- فیس بوک
- سیب
- پی پال
- اینترکام
- گوگل
- واتساپ
- فیس بوک
کلاس های متنی
از کلاس های متنی برای استایل دادن به آیتم های لیست با پس زمینه و رنگ حالت دار استفاده کنید.
- لورم ایپسوم متن ساختگی با تولید
- یک آیتم ساده در لیست اولیه
- یک آیتم گروهی ساده ثانویه
- یک آیتم ساده لیست موفقیت در گروه
- یک آیتم گروهی لیست خطر ساده
- یک آیتم گروهی لیست هشدار ساده
- یک آیتم گروهی لیست اطلاعات ساده
- یک آیتم گروهی لیست نور ساده
- یک آیتم گروهی ساده در لیست تاریک
کلاس های متنی با لینک
از کلاس های متنی برای استایل دادن به آیتم های لیست با پس زمینه و رنگ حالت دار استفاده کنید.
محتوای دلخواه
تقریباً هر 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-iteمیلیونمنطقهای با ضربه بزرگ انتخاب کنید، میتوانید این کار را نیز انجام دهید.
- اولین چک باکس
- چک باکس دوم
- چک باکس سوم
- چک باکس چهارم
- چک باکس پنجم
لیست شماره گذاری شده
اعداد توسط counter-resetروی ایجاد میشوند <ol>، و سپس استایل داده میشوند و با یک ::beforeعنصر شبه روی <li>با counter-incrementو contentقرار میگیرند.
-
14عنوان فرعیلورم ایپسوم متن ساختگی
-
14عنوان فرعیلورم ایپسوم متن ساختگی
-
14عنوان فرعیلورم ایپسوم متن ساختگی
