Група бутони

Групирайте поредица от бутони заедно на един ред с групата бутони и ги увеличете с помощта на JavaScript.

Основен пример

Увийте поредица от бутони .btnс .btn-group. Добавете опционално радио на JavaScript и поведение в стил на полето за отметка с нашия плъгин за бутони .

<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>

Гнездене

Поставете a .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>