گروه دکمه ها (Button Groups)

گروه دکمه ها یعنی چند دکمه کنار هم، مثل کلیدهای بازی. «گروه (Group)» فقط یک ظرف است که دکمه ها را ردیف می کند. حالا خیلی ساده می سازیم.

ساخت گروه دکمه ها

یک <div> با کلاس .btn-group بساز. سپس دکمه ها را داخلش بچین.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

مشاهده در ادیتور

اندازه گروه دکمه ها

به جای تغییر تک تک دکمه ها، اندازه را روی خود گروه بگذار. از .btn-group-lg یا .btn-group-sm استفاده کن.

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

مشاهده در ادیتور

گروه عمودی دکمه ها

اگر فهرستی عمودی می خواهی، از .btn-group-vertical استفاده کن. مثل منوی کناری کلاس.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

مشاهده در ادیتور

چند گروه کنار هم

گروه دکمه ها به صورت «اینلاین (Inline)» است. پس چند گروه کنار هم نمایش داده می شوند.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">BMW</button>
  <button type="button" class="btn btn-primary">Mercedes</button>
  <button type="button" class="btn btn-primary">Volvo</button>
</div>

مشاهده در ادیتور

تو در تو + منوی کشویی

می توانی داخل گروه، یک گروه دیگر بگذاری. سپس با data-bs-toggle="dropdown" یک منو باز کنی.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="javascript:void(0)">Tablet</a></li>
      <li><a class="dropdown-item" href="javascript:void(0)">Smartphone</a></li>
    </ul>
  </div>
</div>

مشاهده در ادیتور

نکته: برای خود دکمه ها به دکمه ها سر بزن. همچنین نشانه ها را در بدج ها ببین تا کنار گروه ها استفاده کنی.

گام های تمرینی

1. یک گروه افقی با سه دکمه بساز.
2. اندازه گروه را به .btn-group-lg تغییر بده.
3. یک گروه عمودی با سه دکمه بساز.

جمع بندی سریع

• .btn-group دکمه ها را در یک خط می چیند.
• .btn-group-lg و .btn-group-sm اندازه را تعیین می کنند.
• .btn-group-vertical چیدمان را عمودی می کند.
• می توانی گروه ها را تو در تو بسازی.