گروه‌های لیستی Bootstrap یک کامپوننت چندمنظوره و از نظر بصری جذاب هستند که برای نمایش مجموعه‌ای از آیتم‌های مرتبط در قالبی شفاف و ساختارمند استفاده می‌شوند. فراتر از فهرست‌های ساده‌ی بدون ترتیب (unordered)، این گروه‌ها قابلیت‌هایی مانند استایل‌دهی پیشرفته، تغییرات زمینه‌ای (contextual)، ویژگی‌های تعاملی و امکان افزودن محتوای متنوع را ارائه می‌دهند. این ویژگی‌ها باعث می‌شوند گزینه‌ای عالی برای منوهای ناوبری، نمایش داده‌ها و ساخت بلوک‌های محتوایی جذاب باشند. این راهنمای جامع، ساختار، گزینه‌های استایل، قابلیت‌های تعاملی، ملاحظات دسترسی‌پذیری و استراتژی‌های خلاقانه پیاده‌سازی گروه‌های لیستی را بررسی می‌کند.
ساختار پایه گروه لیستی (.list-group, .list-group-item)
هسته اصلی گروه لیستی Bootstrap از دو عنصر اصلی تشکیل شده است:
.list-group: این کلاس به عنصر اصلی کانتینر (معمولاً<ul>یا<ol>) اعمال می‌شود و استایل پایه گروه لیست را ایجاد می‌کند..list-group-item: به هر آیتم جداگانه لیست (معمولاً<li>) اعمال می‌شود و باعث ایجاد فاصله و حاشیه یکنواخت بین آیتم‌ها می‌شود.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Bootstrap List Group</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h2>Basic List Group</h2>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
آیتم‌های زمینه‌ای (.list-group-item-*)
مشابه هشدارها (alerts) و بج‌ها (badges)، Bootstrap کلاس‌هایی برای نمایش وضعیت‌های مختلف دارد:
.list-group-item-primary– آیتم اولیه.list-group-item-success– آیتم موفق.list-group-item-warning– آیتم هشدار.list-group-item-danger– آیتم خطرناک
<ul class="list-group">
<li class="list-group-item list-group-item-primary">A primary item</li>
<li class="list-group-item list-group-item-success">A success item</li>
<li class="list-group-item list-group-item-warning">A warning item</li>
<li class="list-group-item list-group-item-danger">A danger item</li>
</ul>
گروه‌های لیستی بدون حاشیه (.list-group-flush)
برای نمایی ساده‌تر بدون گوشه‌های گرد و خطوط مرزی:
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
گروه‌های لیستی با بج‌ها
با استفاده از بج‌ها می‌توانید تعداد، وضعیت یا اطلاعات مکمل را نمایش دهید:
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac turpis egestas
<span class="badge bg-success rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge bg-danger rounded-pill">1</span>
</li>
</ul>
آیتم‌های فعال و غیرفعال
برای نشان دادن آیتم فعال یا غیرفعال:
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A regular item</li>
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
</ul>
لیست‌های تعاملی
می‌توانید از <a> یا <button> به‌جای <li> برای ایجاد آیتم‌های قابل کلیک استفاده کنید. کلاس .list-group-item-action به آیتم‌ها جلوه تعاملی می‌دهد.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<button type="button" class="list-group-item list-group-item-action">A button item</button>
</div>
استفاده از محتوای متنوع
می‌توانید هر نوع محتوای HTML را داخل آیتم‌ها قرار دهید:
<ul class="list-group">
<li class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">And some quick example text to build on the card title and make up the bulk of the card's content.</p>
<small>And some small print.</small>
</li>
<li class="list-group-item">
<h5 class="mb-1">Another heading</h5>
<p class="mb-1">More content here.</p>
</li>
</ul>
ملاحظات دسترسی‌پذیری (Accessibility)
برای دسترسی بهتر:
- از
<ul>یا<ol>استفاده کنید. - برای آیتم‌های تعاملی از
<a>یا<button>با نقش (role) مناسب استفاده کنید. - از
aria-current="true"برای آیتم فعال وaria-disabled="true"برای آیتم غیرفعال استفاده کنید. - آیتم‌ها باید با کلید Tab قابل انتخاب باشند و با Enter یا Spacebar فعال شوند.
- متن آیتم‌ها باید هدف آن‌ها را واضح بیان کند.
استراتژی‌های خلاقانه برای استفاده
فراتر از لیست‌های ساده، از گروه‌های لیستی می‌توان برای موارد زیر استفاده کرد:
- فهرست کارها (To-Do): با چک‌باکس یا نشانگر وضعیت
- بخش نظرات: ساختاردهی دیدگاه‌ها با اطلاعات کاربر
- فهرست فایل‌ها: نمایش نام، آیکون و اندازه فایل
- اعلان‌ها: نمایش هشدارها یا رویدادهای اخیر
- مواد لازم دستور پخت: نمایش واضح ترکیبات
- دفترچه مخاطبین: با دکمه‌های اقدام برای تماس
- راهنماهای گام‌به‌گام: نمایش مراحل با تفکیک بصری
بهترین شیوه‌ها
- استفاده معنایی: بین
<ul>و<ol>با توجه به ترتیب اهمیت، انتخاب کنید. - ثبات در استایل: ظاهر و ساختار را در تمام لیست‌ها حفظ کنید.
- نشانه‌گذاری بصری واضح: از کلاس‌های زمینه‌ای، فعال یا غیرفعال استفاده کنید.
- آیتم‌های مختصر: حتی با محتوای غنی، از طولانی شدن بیش از حد پرهیز کنید.
- تست کامل: نمایش و عملکرد لیست‌ها را در مرورگرها و دستگاه‌های مختلف بررسی کنید.
- اولویت دسترسی‌پذیری: همیشه استفاده برای کاربران دارای ناتوانی‌های خاص را در نظر داشته باشید.
جمع‌بندی
گروه‌های لیستی در Bootstrap ابزاری قدرتمند و انعطاف‌پذیر برای نمایش اطلاعات به شکلی سازمان‌یافته، تعاملی و زیبا هستند. با درک استایل‌ها، قابلیت‌های تعاملی و امکان افزودن محتوای متنوع، می‌توانید فراتر از لیست‌های ساده رفته و عناصری جذاب و مفید برای تجربه کاربری بسازید.