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>