Группа кнопок

Группы кнопок Bootstrap позволяют объединять кнопки по горизонтали или по вертикали.

Горизонтальная группа кнопок

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary">Таиланд</button> <button type="button" class="btn btn-primary">Камбоджа</button> <button type="button" class="btn btn-primary">Вьетнам</button> </div>

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

Замените btn-group на btn-group-vertical, чтобы группа кнопок располагалась вертикально.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="btn-group-vertical" role="group"> <button type="button" class="btn btn-primary">Таиланд</button> <button type="button" class="btn btn-primary">Камбоджа</button> <button type="button" class="btn btn-primary">Вьетнам</button> </div>

Размер группы кнопок

Bootstrap позволяет контролировать размер всех кнопок в группе (чтобы не приходилось менять каждую кнопку отдельно). Для этого добавьте класс .btn-group-sm или .btn-group-lg к классу .btn-group, чтобы все кнопки в группе стали маленькими или большими.

Отказ от этих классов приведёт к тому, что размер кнопок в группе установится по умолчанию.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="btn-group btn-group-sm" role="group"> <button type="button" class="btn btn-primary">Маленькая</button> <button type="button" class="btn btn-primary">Маленькая</button> <button type="button" class="btn btn-primary">Маленькая</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary">По умолчанию</button> <button type="button" class="btn btn-primary">По умолчанию</button> <button type="button" class="btn btn-primary">По умолчанию</button> </div> <div class="btn-group btn-group-lg" role="group"> <button type="button" class="btn btn-primary">Большая</button> <button type="button" class="btn btn-primary">Большая</button> <button type="button" class="btn btn-primary">Большая</button> </div> <style scoped> div {margin:10px;} </style>

Bootstrap 3 поддерживает группы кнопок сверхмалого размера с классом .btn-group-xs, но в Bootstrap 4 это было исключено.

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

При необходимости вы можете объединить группы кнопок в одну панель инструментов. Для этого вложите группу кнопок в элемент <div> с классом .btn-toolbar.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group mr-2" role="group"> <button type="button" class="btn btn-primary">Группа 1</button> <button type="button" class="btn btn-primary">Группа 1</button> <button type="button" class="btn btn-primary">Группа 1</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary">Группа 2</button> <button type="button" class="btn btn-primary">Группа 2</button> </div> </div>

Используйте любой из служебных классов для добавления пространства между группами кнопок. Например, применение mr-2 к группе кнопок добавит небольшое поле справа.

Объединение выпадающего меню с группой кнопок

Вы можете вкладывать раскрывающиеся меню в группы кнопок, используя отдельную группу кнопок для раскрывающегося меню, а затем вложив эту группу в другую.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary">Купить</button> <button type="button" class="btn btn-primary">Продать</button> <div class="btn-group" role="group"> <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">О нас</button> <div class="dropdown-menu" aria-labelledby="about-us"> <a class="dropdown-item" href="#">Наша история</a> <a class="dropdown-item" href="#">Наша команда</a> <a class="dropdown-item" href="#">Контакты</a> </div> </div> </div>

Выпадающее меню с разделённой зоной

Используйте группы кнопок для создания выпадающего меню с разделённой зоной.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="btn-group"> <button type="button" class="btn btn-success">О нас</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Наша история</a> <a class="dropdown-item" href="#">Наша команда</a> <a class="dropdown-item" href="#">Контакты</a> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты