Source

گروه دکمه

مجموعه‌ای از دکمه‌ها را روی یک خط با گروه دکمه‌ها گروه‌بندی کنید و با جاوا اسکریپت به آنها قدرت دهید.

مثال اساسی

یک سری دکمه را با .btnداخل بپیچید .btn-group. با افزونه دکمه‌های ما، رادیو جاوا اسکریپت اختیاری و رفتار استایل چک باکس را اضافه کنید .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
اطمینان حاصل کنید که درست است roleو یک برچسب ارائه دهید

برای اینکه فناوری های کمکی (مانند صفحه خوان ها) نشان دهند که یک سری از دکمه ها گروه بندی شده اند، باید یک roleویژگی مناسب ارائه شود. برای گروه های دکمه ای، این خواهد بود role="group"، در حالی که نوار ابزار باید دارای یک role="toolbar"باشد.

علاوه بر این، به گروه ها و نوار ابزارها باید یک برچسب صریح داده شود، زیرا اکثر فناوری های کمکی در غیر این صورت، علی رغم وجود ویژگی نقش صحیح، آنها را اعلام نمی کنند. در مثال‌های ارائه‌شده در اینجا، از , استفاده می‌کنیم aria-label، اما از جایگزین‌هایی مانند آن aria-labelledbyنیز می‌توان استفاده کرد.

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

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

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

به راحتی می توانید گروه های ورودی را با گروه های دکمه ای در نوار ابزار خود ترکیب کنید. مشابه مثال بالا، احتمالاً به برخی از ابزارهای کمکی نیاز دارید تا به درستی فضاها را جابجا کنید.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

سایز بندی

به‌جای اعمال کلاس‌های اندازه دکمه‌ها برای هر دکمه در یک گروه، فقط .btn-group-*به هر یک اضافه کنید .btn-group، از جمله هر یک در هنگام تودرتو کردن چند گروه.



<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

لانه سازی

زمانی که می‌خواهید منوهای کشویی با یک سری دکمه ترکیب شوند، یک را .btn-groupدر دیگری قرار دهید..btn-group

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

تنوع عمودی

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

<div class="btn-group-vertical">
  ...
</div>