گروه‌های دکمه در Bootstrap فقط مجموعه‌ای از دکمه‌ها که در کنار هم قرار گرفته‌اند نیستند؛ بلکه یک الگوی قدرتمند در رابط کاربری برای ارائه مجموعه‌ای از اقدامات یا گزینه‌های مرتبط (و گاهی انحصاری) به کاربران هستند. با گروه‌بندی بصری دکمه‌ها، حس یکپارچگی و هدف ایجاد می‌شود، که به وضوح، به تعامل روان‌تر و تجربه کاربری بهتر منجر می‌شود. این راهنمای جامع به بررسی عمیق ساختار گروه‌های دکمه در Bootstrap، تنوع آن‌ها، ویژگی‌های پیشرفته، نکات دسترسی‌پذیری و روش‌های خلاقانه برای پیاده‌سازی می‌پردازد — بسیار فراتر از چیدمان ساده‌ی دکمه‌ها کنار هم.
ساختار پایه گروه دکمه‌ها (.btn-group)
پایه گروه دکمه در Bootstrap، کلاس .btn-group است. این کلاس به عنوان یک پوشش‌دهنده برای چند عنصر <button> یا <a> با کلاس .btn عمل می‌کند و استایل لازم برای اتصال بصری دکمه‌ها را اعمال می‌کند.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Bootstrap Button 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 Button Group</h2>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
.btn-group: دکمه‌ها را به‌صورت افقی گروه‌بندی می‌کند.role="group"وaria-label: برای دسترسی‌پذیری ضروری هستند و اطلاعات معنایی را به صفحه‌خوان‌ها منتقل می‌کنند.
گروه‌های دکمه عمودی (.btn-group-vertical)
در موقعیت‌هایی که چیدمان عمودی مناسب‌تر است (مثلاً در نوارهای کناری یا گزینه‌های مرحله‌ای)، از کلاس .btn-group-vertical استفاده می‌شود.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-primary">Button 2</button>
<button type="button" class="btn btn-primary">Button 3</button>
</div>
تغییر اندازه گروه دکمه‌ها (.btn-group-lg, .btn-group-sm)
درست مانند دکمه‌های منفرد، می‌توانید اندازه گروه دکمه را نیز کنترل کنید.
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-secondary">Large Left</button>
<button type="button" class="btn btn-outline-secondary">Large Middle</button>
<button type="button" class="btn btn-outline-secondary">Large Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-outline-secondary">Small Left</button>
<button type="button" class="btn btn-outline-secondary">Small Middle</button>
<button type="button" class="btn btn-outline-secondary">Small Right</button>
</div>
گروه‌های دکمه با Dropdown
گروه‌های دکمه به‌راحتی با کامپوننت Dropdown در Bootstrap ترکیب می‌شوند.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
گروه‌های دکمه با Radio و Checkbox
می‌توان از گروه‌های دکمه برای ایجاد رابط‌های انتخابی زیبا و واضح (radio و checkbox) استفاده کرد.
<h2>Radio Button Group</h2>
<div class="btn-group" role="group" aria-label="Radio button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Active</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
<h2 class="mt-3">Checkbox Button Group</h2>
<div class="btn-group" role="group" aria-label="Checkbox button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-success" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-success" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-success" for="btncheck3">Checkbox 3</label>
</div>
سازگاری با صفحه‌نمایش‌های مختلف
گروه‌های دکمه در Bootstrap به‌طور ذاتی واکنش‌گرا هستند. در صفحه‌های کوچکتر، دکمه‌ها به‌صورت خودکار به خط بعد می‌روند. برای کنترل بهتر، از کلاس‌های Utility یا سیستم Grid استفاده کنید.
نکات دسترسی‌پذیری
برای اطمینان از دسترسی‌پذیر بودن گروه دکمه‌ها:
- از
role="group"وaria-labelبرای توصیف عملکرد گروه استفاده کنید. - از طریق کلید Tab بتوان بین دکمه‌ها حرکت کرد.
- هر دکمه باید دارای برچسب واضح و توصیفی باشد.
- در گروه‌های radio/checkbox از ARIA attributes مناسب مانند
aria-checkedوaria-labelledbyاستفاده شود.
استراتژی‌های پیاده‌سازی نوآورانه
فقط به نوار ابزارهای ساده اکتفا نکنید! گروه‌های دکمه می‌توانند در موارد زیر نیز استفاده شوند:
- کنترل‌های بخش‌بندی‌شده: انتخاب‌های انحصاری (مثل حالت‌های نمایش: لیست، شبکه‌ای، نقشه).
- تب‌های ناوبری جایگزین: شبیه‌سازی تب‌ها با دکمه‌ها برای ناوبری ثانویه.
- نوار ابزار اقدامات: گروه‌بندی عملیات‌های مرتبط (مثلاً ابزارهای ویرایش).
- گزینه‌های فیلتر و مرتب‌سازی: اعمال چندین فیلتر یا معیار مرتب‌سازی.
- مسیریاب مراحل: نمایش مراحل چندگانه به‌صورت بصری.
- سیستم امتیازدهی: ایجاد کنترل‌هایی مبتنی بر ستاره یا آیکون.
بهترین روش‌ها
- گروه‌بندی منطقی: فقط دکمه‌هایی را گروه‌بندی کنید که عملکردهای مرتبط دارند.
- یکپارچگی بصری: استایل دکمه‌ها باید سازگار باشد.
- برچسب‌گذاری شفاف: عملکرد هر دکمه را به‌وضوح نشان دهید.
- توجه به زمینه: محل و استایل گروه باید با کاربرد آن متناسب باشد.
- آزمایش کامل: واکنش‌پذیری و عملکرد را در مرورگرها و دستگاه‌های مختلف بررسی کنید.
سازماندهی تعامل کاربر با گروه‌های دکمه Bootstrap
گروه‌های دکمه در Bootstrap ابزاری قدرتمند برای ایجاد رابط‌هایی منظم، شهودی و قابل دسترس هستند. با شناخت ساختارها، تنوع‌ها و قابلیت‌های ترکیبی آن‌ها، می‌توانید گزینه‌ها و اقدامات را به‌صورت واضح در اختیار کاربران قرار دهید. همیشه دسترسی‌پذیری را در اولویت قرار دهید و با خلاقیت از این ابزار برای بهبود عملکرد و جذابیت رابط‌های کاربری بهره ببرید — و دکمه‌ها را به یک سمفونی هماهنگ در تعاملات کاربری تبدیل کنید.