آشنایی با ایجاد list group (لیست گروهی) در بوت‌استرپ


نویسنده:
شنبه 24 آبان 1399
list group در بوت‌استرپ

در صفحات وبی که در اینترنت جستجو می‌کنید با انواع مختلف لیست‌‌بندی روبه‌رو شده‌اید. در صفحاتی که با Bootstrap طراحی شده است از گروه‌های لیستی استفاده شده است. با استفاده از list group در بوت‌استرپ می‌توان آیتم‌های مختلفی را با اشکال مناسبی نمایش داد که به آن‌ها می‌پردازیم.

List Group چیست؟

List Group به لیست‌های گروهی گفته می‌شود که برای ارائه محتوا و نمایش مجموعه‌ای از موارد مختلف استفاده می‌شود. در واقع این لیست‌ها همان لیست‌های در HTML هستند که در بوت‌استرپ به اشکال مختلف می‌باشند.

رایج‌ترین و ساده‌ترین نوع این لیست‌ها در بوت‌استرپ لیست‌های طبقه‌بندی نشده هستند. این لیست‌ها را با استفاده از یک <ul> با کلاس list-group. و چند عنصر <li> با کلاس list-group-item. طراحی می‌کنیم:

list group در بوت‌استرپ


لیست حالت فعال‌ (Active State)

لیست‌های فعال در مواقعی که کاربر چند موارد را در لیستی که به او ارائه دادید، انتخاب می‌کند، می‌تواند کاربرد داشته باشد. با استفاده از کلاس active. می‌توانید عناصر یک list group را به حالت فعال و هایلایت شده نمایش دهید:

list group در بوت‌استرپ


لیست‌های لینک‌دار (List Group With Linked Items)

در list group در بوت‌استرپ می‌توان لیست‌هایی ایجاد کرد که قابل کلیک کردن داشته باشند. برای این‌کار می‌توان به جای عنصر <ul>  از <div>  و به جای <li> از <a> استفاده کرد. همچنین اگر بخواهید در هنگام حرکت ماوس روی آیتم‌ها که اصطلاحا به آن hover می‌گویند، رنگ پس‌زمینه خاکستری شود. می‌توانید از کلاس list-group-item-action. استفاده کنید.کلاس disabled. دقیقا بر خلاف کلاس active عمل می کند. اگر در لیست خود موردی داشته باشیم که بخواهیم غیرفعال باشد (مثلا لینکی که فعلا در دسترس نیست) می توانیم از کلاس disabled. استفاده کنیم تا به کاربر بگوییم فعلا این قابلیت موجود نیست. به مثال زیر دقت کنید:

لیست‌های گروهی لینک‌دار


آیتم‌های غیرفعال (Disabled Item)

کلاس disabled. بر خلاف کلاس active برای لیست‌های گروهی عمل می‌کند. اگر در لیست یک صفحه وب، مواردی وجود داشته باشد که غیرفعال باشند، می‌توان از کلاس disabled. استفاده کرد. بدین صورت کاربر متوجه نبود دسترسی به قابلیت موجود در صفحه خواهد شد.

همان‌طور که در شکل زیر مشاهده می‌کنید، دو آیتم غیرفعال دارد:

آیتم‌های غیرفعال (Disabled Item)

کد تصویر بالا به صورت زیر می باشد:


لیست‌های افقی (Horizontal List Groups)

اگر تمایل به این دارید که به جای نمایش عمودی فهرست، فهرست شما به نمای افقی تبدیل شود. کافیست کلاس .list-group-horizontal را در کنار کلاس .list-group اضافه کنید. در بسیاری از طراحی‌های واکنش‌گرا برای تلفن‌های هوشمند از این لیست استفاده می‌شود.

list group در بوت‌استرپ


کلاس‌های متنی (Contextual Classes)

در بوت‌استرپ کلاس‌های متنی‌ای وجود دارند که برای لیست‌ کردن موارد استفاده می‌شوند. کلاس‌های رنگ‌آمیزی این لیست عبارت‌اند از:

  • list-group-item-success
  • list-group-item-secondary
  • list-group-item-info
  • list-group-item-warning
  • list-group-item-danger
  • list-group-item-primary
  • list-group-item-dark
  • list-group-item-light
کلاس‌های متنی (Contextual Classes)

این لیست‌ها را می‌توان به صورت لینک‌دار نیز در دسترس قرار داد.


لیست‌های نشان‌دار (List Group with Badges)

اگر کلاس badge. (نشانه) را به عنوان یک کلاس کمکی به لیست‌ اضافه کنید، می‌توانید آن ها را دارای نشانه کنید. برای افزودن نشانه به لیست می‌توانید از تگ span استفاده کنید.

لیست‌های نشان‌دار

از استفاده‌های رایج این لیست‌های نشان‌دار می‌توان به ایجاد تب‌های شمارنده اشاره کرد. به کد زیر توجه فرمایید:

امیدوارم از این مقاله استفاده کافی برده باشید، برای آشنایی با دیگر عناصر بوت‌استرپ می توانید به دوره آموزش رایگان Bootstrap مراجعه فرمایید.

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید