Bootstrap Группа кнопок
Группы кнопок позволяют располагать несколько кнопок в одной строке. Когда вы хотите выровнять кнопки вместе, это очень полезно. Вы можетеПлагин кнопок BootstrapДобавляет необязательное поведение JavaScript в стиле радиокнопок и флажков.
Следующая таблица обобщает некоторые важные классы, предоставляемые Bootstrap для использования групп кнопок:
| Класс | Описание | Пример кода |
|---|
| .btn-group | Этот класс используется для создания базовой группы кнопок. В.btn-groupразместите ряд кнопок с классом.btn. |
<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">Кнопка 1</button>
<button type="button" class="btn btn-default">Кнопка 2</button>
<button type="button" class="btn btn-default">Кнопка 3</button>
</div>
Попробуйте »
Результат показан ниже:
Панель инструментов кнопок
В примере ниже демонстрируется класс, рассмотренный в таблице выше.btn-toolbarиспользование:
Пример
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Кнопка 1</button>
<button type="button" class="btn btn-default">Кнопка 2</button>
<button type="button" class="btn btn-default">Кнопка 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Кнопка 4</button>
<button type="button" class="btn btn-default">Кнопка 5</button>
<button type="button" class="btn btn-default">Кнопка 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Кнопка 7</button>
<button type="button" class="btn btn-default">Кнопка 8</button>
<button type="button" class="btn btn-default">Кнопка 9</button>
</div>
</div>
Попробуйте »
Результат показан ниже:
Размер кнопки
Пример ниже демонстрирует класс, рассмотренный в таблице выше.btn-group-*использование:
Пример
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Кнопка 1</button>
<button type="button" class="btn btn-default">Кнопка 2</button>
<button type="button" class="btn btn-default">Кнопка 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Кнопка 4</button>
<button type="button" class="btn btn-default">Кнопка 5</button>
<button type="button" class="btn btn-default">Кнопка 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Кнопка 7</button>
<button type="button" class="btn btn-default">Кнопка 8</button>
<button type="button" class="btn btn-default">Кнопка 9</button>
</div>
Попробуйте »
Результат показан ниже:
Вложенность
Вы можете вложить одну группу кнопок в другую группу кнопок, то есть в.btn-groupвложить ещё одну в.btn-group . Это используется, когда нужно объединить выпадающее меню с рядом кнопок.
Пример
<div class="btn-group">
<button type="button" class="btn btn-default">Кнопка 1</button>
<button type="button" class="btn btn-default">Кнопка 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Выпадающий список<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Ссылка выпадающего списка 1</a></li>
<li><a href="#">Ссылка выпадающего меню 2</a></li>
</ul>
</div>
</div>
Попробуйте »
Результат показан ниже:
Вертикальная группа кнопок
Пример ниже демонстрирует класс, рассмотренный в таблице выше,.btn-group-verticalиспользование:
Пример
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Кнопка 1</button>
<button type="button" class="btn btn-default">Кнопка 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Выпадающий список<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Ссылка выпадающего списка 1</a></li>
<li><a href="#">Ссылка выпадающего меню 2</a></li>
</ul>
</div>
</div>
Попробуйте »
Результат показан ниже:
Другие расширения
