Группа кнопок
Сгруппируйте несколько кнопок горизонтально в ряд с помощью «группы кнопок» и добавьте в них функциональностью 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
указан верно и добавьте label
Для того, чтобы «вспомогательные технологии» (такие как «экранные читалки») при работе с вашим сайтом могли понять, что данная серия кнопок является группой, необходимо указать соответствующий атрибут role
. Для групп кнопок атрибут role="group"
, а «тулбары» должны иметь role="toolbar"
.
В дополнение, группам и «тулбарам» следует придавать явный атрибут label, так как иначе большинство программ вспомогательных технологий не распознает и не объявит их, даже несмотря на присутствие правильного атрибута «role». В примерах ниже использован aria-label
, но также можно использовать и альтернативные решения, такие как aria-labelledby
.
Кнопки «тулбаров»
Сочетайте наборы групп кнопок с кнопками тулбаров для создания более сложных компонентов. Используйте вспомогательные классы (т.е. либо исполняющие одну, простую роль, например .float-left, либо классы с очень простым, универсальным паттерном применения, например .visually-hidden) для распределения групп, кнопок и т.д.
<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
, включая каждый элемент во множественных вложенных группах.
Вложенность
Расположите элемент класса .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="#">Выпадающая ссылка</a>
<a class="dropdown-item" href="#">Выпадающая ссылка</a>
</div>
</div>
</div>
Вертикальные вариации
Создайте набор кнопок, расположенный вертикально. Раздельные выпадающие кнопки тут не работают.