Bootstrap Группы кнопок
Группы кнопок
Bootstrap позволяет группировать ряд кнопок вместе (в одной строке) в группу кнопок:
<div> для создания группы кнопок используйте элемент с классом .btn-group:
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Совет: Вместо применения размеров кнопок к каждой кнопке в группе, используйте класс .btn-group-lg|sm|xs для размера всех кнопок в группе:
Пример
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Вертикальные группы кнопок
Bootstrap также поддерживает вертикальные группы кнопок:
Используйте класс .btn-group-vertical для создания вертикальной группы кнопок:
Пример
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Выровненные группы кнопок
Чтобы охватить всю ширину экрана, используйте .btn-group-justified класс:
Пример с <a> элементами:
Пример
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Примечание: Для <button> элементов необходимо обернуть каждую кнопку в .btn-group классе:
Пример
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Вложенные группы кнопок и раскрывающееся меню
Вложенные группы кнопок для создания раскрывающихся меню:
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
Раскрывающиеся списки кнопок разделения
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
