Группы кнопок 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>