Группы кнопок
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-* по размеру все кнопки в группе:
пример
<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> Попробуй сам " Split Dropdowns Button
пример
<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> Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »