گروه لیست
مثال اساسی
ابتدایی ترین گروه لیست یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است.\n
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
\u003cul class\u003d\
آیتم های فعال
اضافه کردن.active to a .list-group-item to indicate the current active selection.
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
\u003cul class\u003d\
موارد غیر فعال
اضافه کردن.disabled to a .list-group-item to make it appear disabled.
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
\u003cul class\u003d\
لینک ها و دکمه ها
استفاده کنید<a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.
\u003cdiv class\u003d\
فلاش
اضافه کردن.list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
- درایو گوگل
- فیس بوک مسنجر
- شرکت فناوری اپل
- سیستم پشتیبانی اینترکام
- درگاه پرداخت پی پال
\u003cul class\u003d\
افقی
اضافه کردن.list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width.
- گوگل
- واتساپ
- فیس بوک
- سیب
- پی پال
- اینترکام
- گوگل
- واتساپ
- فیس بوک
\u003c!-- عمودی --\u003e\n
کلاس های متنی
از کلاس های متنی برای استایل دادن به آیتم های لیست با پس زمینه و رنگ حالت دار استفاده کنید.
- Dapibus ac facilisis in
- یک آیتم ساده در لیست اولیه
- یک آیتم گروهی ساده ثانویه
- یک آیتم ساده لیست موفقیت در گروه
- یک آیتم گروهی لیست خطر ساده
- یک آیتم گروهی لیست هشدار ساده
- یک آیتم گروهی لیست اطلاعات ساده
- یک آیتم گروهی لیست نور ساده
- یک آیتم ساده گروه لیست تاریک
\u003cul class\u003d\
کلاس های متنی با لینک
از کلاس های متنی برای استایل دادن به آیتم های لیست با پس زمینه و رنگ حالت دار استفاده کنید.
محتوای دلخواه
تقریباً هر HTML را در داخل خود اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر، با کمک ابزارهای flexbox.
عنوان مورد گروه را فهرست کنید
3 روز پیشDonec id elit non mi porta gravida at eget metus.
Donec id elit non mi porta.عنوان مورد گروه را فهرست کنید
3 روز پیشDonec id elit non mi porta gravida at eget metus.
Donec id elit non mi porta.عنوان مورد گروه را فهرست کنید
3 روز پیشDonec id elit non mi porta gravida at eget metus.
Donec id elit non mi porta.
\u003cdiv class\u003d\
با نشان ها
برای نشان دادن تعداد خوانده نشده، فعالیت و موارد دیگر با کمک برخی ابزارهای کمکی، نشان‌ها را به هر مورد از گروه فهرست اضافه کنید.
- ایمیل های جیمیل14
- پرداخت های معلق2
- اقدام مورد نیاز99+
- پرداخت ها انجام شد20+
\u003cul class\u003d\
چک باکس ها و رادیوها
چک باکس ها و رادیوهای Bootstrap را در لیست موارد گروه قرار دهید و در صورت نیاز سفارشی کنید. <label>s, but please remember to include an aria-label attribute and value for accessibility.
- First checkbox
- Second checkbox
- Third checkbox
- Fourth checkbox
\u003cul class\u003d\
شماره گذاری شده است
اعداد توسطcounter-reset on the <ol>, and then styled and placed with a ::before psuedo-element on the <li> with counter-increment and content.
-
14عنوان فرعیCras justo odio
-
14عنوان فرعیCras justo odio
-
14عنوان فرعیCras justo odio
\u003col class\u003d\