Група на копчиња

Групирајте серија копчиња заедно на една линија со групата копчиња и супер-напојувајте ги со 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>

Гнездење

Ставете го .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>