Группы кнопок позволяют нескольким кнопкам взаимодействовать вместе на одной строке. Это полезно, если вы хотите разместить элементы, как кнопки выравнивания вместе. Вы можете добавить опциональный JavaScript стили радио и флажков с помощью плагина кнопок в Bootstrap.

В следующей таблице приведены важные классы Bootstrap, которые предоставляет использовать кнопки группы:

Класс Описание Пример кода
.btn-group Этот класс используются для основной группы кнопок. Оберните ряд кнопок с классом .btn в .btn-group.
<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button>
</div>
.btn-toolbar Этот класс помогает объединить наборы <div class = “btn-group”> в <div class = “btn-toolbar”> для более сложных компонентов.
<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xs Эти классы могут быть применены к группе кнопок вместо изменения размера каждой кнопки.
<div class = "btn-group btn-group-lg">...</div>
<div class = "btn-group btn-group-sm">...</div>
<div class = "btn-group btn-group-xs">...</div>
.btn-group-vertical Этот класс делает набор кнопок отображаются вертикально уложенными, а не горизонтально.
<div class = "btn-group-vertical"> ...
</div>

Основная группа кнопок

Следующий пример демонстрирует использование класса .btn-group, рассмотренной в приведенной выше таблице:

<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button>
</div>

 

Кнопка панели инструментов

Следующий пример демонстрирует использование класса .btn-toolbar из приведенной выше таблице:

<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 7</button> <button type = "button" class = "btn btn-default">Button 8</button> <button type = "button" class = "btn btn-default">Button 9</button> </div>
</div>

 

Размер кнопки

Следующий пример демонстрирует использование класс .btn-group-*, обсуждаемый в приведенной выше таблице:

<div class = "btn-group btn-group-lg"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group btn-group-sm"> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group btn-group-xs"> <button type = "button" class = "btn btn-default">Button 7</button> <button type = "button" class = "btn btn-default">Button 8</button> <button type = "button" class = "btn btn-default">Button 9</button>
</div>

 

Вложенные

Вы можете вложить группы кнопок в другую группу кнопок, т.е. поместить .btn-group в другую .btn-group. Это делается, когда вы хотите, выпадающее меню, смешанное с серией кнопок.

<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <div class = "btn-group"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Dropdown <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">Dropdown link 1</a></li> <li><a href = "#">Dropdown link 2</a></li> </ul> </div>
</div>

 

Вертикальные группы кнопок

Следующий пример демонстрирует использование класса .btn-группы по вертикали из приведенной выше таблице:

<div class = "btn-group-vertical"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <div class = "btn-group-vertical"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Dropdown <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">Dropdown link 1</a></li> <li><a href = "#">Dropdown link 2</a></li> </ul> </div>
</div>

 

Источник: AndreyEx.ru