Как создать группу кнопок в Bootstrap 5?
Группа кнопок, как следует из названия, представляет собой просто группу кнопок, выровненных вместе, чтобы продемонстрировать их как единый элемент. В нашем предыдущем руководстве по кнопкам мы объяснили, как создавать кнопки с флажками и переключателями, используя концепцию группы кнопок. В этом руководстве мы объясним различные типы групп кнопок на примерах в Bootstrap 5.
Учебное пособие по группе кнопок Bootstrap 5
Это руководство охватывает следующие главы:
- Создание группы горизонтальных кнопок
- Панель инструментов группы кнопок
- Размер групп кнопок
- Вложенная группа кнопок с раскрывающимся списком
- Вертикальная группа кнопок
- Вложенная вертикальная группа кнопок
1. Группа горизонтальных кнопок
Горизонтальная группа кнопок — это простая форма объединения двух или более кнопок вместе. Давайте создадим группу кнопок из четырех кнопок, используя «.btn-group»С тегом div. Каждая кнопка использует свой контекстный класс, чтобы отображать ее разными цветами.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Button Group -->
<div class="btn-group" role="group" aria-label="Horizontal Button Group">
<button type="button" class="btn btn-primary">Button 1 </button>
<button type="button" class="btn btn-warning">Button 2</button>
<button type="button" class="btn btn-danger">Button 3</button>
<button type="button" class="btn btn-info">Button 4</button>
</div>
<!-- End of Button Group -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Значок «роль» а также «ария-этикетка»Являются необязательными, в основном используются с точки зрения доступности для программ чтения с экрана.
Это приведет к следующему результату в браузере.

Вышеупомянутый код представляет собой полный код шаблона с использованием CDN CSS и ссылок на скрипты. Вы можете просто заменить блок между началом и концом группы кнопок кодом, приведенным в примерах ниже, чтобы создать и протестировать различные стили группы кнопок.
2. Панель инструментов группы кнопок
Опция группировки позволяет вам иметь панель инструментов, как упорядочивание, добавляя добавление роль = «панель инструментов» атрибут. Вы также можете использовать группу кнопок вместе с группами ввода для создания панелей инструментов с вводом текста. Пример кода приведен ниже:
<div class="btn-toolbar" role="toolbar" aria-label="Button Group Toolbar">
<div class="btn-group" role="group" aria-label="Button Group">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-info">C</button>
<button type="button" class="btn btn-success">D</button>
</div>
<div class="input-group">
<span class="input-group-addon" id="id1">@</span>
<input type="text" class="form-control" placeholder="This is input group box" aria-describedby="id1">
</div>
</div>
Это приведет к следующему результату в браузере:

Как видите, группа кнопок и элементы группы ввода не имеют пробелов. Вы должны использовать собственный CSS, чтобы добавить отступ между этими двумя элементами, чтобы правильно их выровнять.
3. Различные размеры групп кнопок.
Bootstrap 5 позволяет иметь три класса размеров для больших (btn-group-lg), по умолчанию и маленький (btn-group-sm). Вы можете напрямую добавить большой или малый класс в «.btn-group»Класс, чтобы изменить размер.
<!-- Start of Large Button Group Size -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large Button Group">
<button type="button" class="btn btn-primary">Large Button 1</button>
<button type="button" class="btn btn-warning">Large Button 2</button>
<button type="button" class="btn btn-danger">Large Button 3</button>
</div>
<!-- Start of Default Button Group Size -->
<div class="btn-group" role="group" aria-label="Default Button Group">
<button type="button" class="btn btn-primary">Default Button 1</button>
<button type="button" class="btn btn-warning">Default Button 2</button>
<button type="button" class="btn btn-danger">Default Button 3</button>
</div>
<!-- Start of Small Button Group Size -->
<div class="btn-group btn-group-sm" role="group" aria-label="Small Button Group">
<button type="button" class="btn btn-primary">Small Button 1</button>
<button type="button" class="btn btn-warning">Small Button 2</button>
<button type="button" class="btn btn-danger">Small Button 3</button>
</div>
Приведенный выше код даст результаты, как показано ниже:

4. Создание вложенных групп кнопок с раскрывающимся списком.
Вложенные группы кнопок легко создать, поместив значок «.btn-group«Класс внутри другого».btn-group» класс. Таким образом вы можете показать несколько кнопок, а затем раскрывающийся список с дополнительными ссылками.
<div class="btn-group" role="group" aria-label="Nested Button Group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<div class="btn-group" role="group">
<button id="nested1" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 1
</button>
<div class="dropdown-menu" aria-labelledby="nested1">
<a class="dropdown-item text-danger" href="https://www.webnots.com/bootstrap-button-group-tutorial/#">Dropdown Link 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-info" href="https://www.webnots.com/bootstrap-button-group-tutorial/#">Dropdown Link 2</a>
</div>
</div>
</div>
Результат должен выглядеть так:

5. Вертикальные группы кнопок
Кнопки можно сгруппировать по вертикали с помощью «.vertical«Класс» вместе с «.btn-group» класс.
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Button 1 </button>
<button type="button" class="btn btn-warning">Button 2</button>
<button type="button" class="btn btn-danger">Button 3</button>
</div>
В результате кода должна появиться следующая группа кнопок:

6. Вложенная вертикальная группа кнопок
Подобно горизонтальному вложению, вертикальные группы кнопок также могут быть вложены с раскрывающимся списком.
<div class="btn-group-vertical" role="group" aria-label="Nested Button Group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-secondary">Button 2</button>
<div class="btn-group" role="group">
<button id="nested2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 1
</button>
<div class="dropdown-menu" aria-labelledby="nested2">
<a class="dropdown-item text-danger" href="https://www.webnots.com/bootstrap-button-group-tutorial/#">Dropdown Link 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="https://www.webnots.com/bootstrap-button-group-tutorial/#">Dropdown Link 2</a>
</div>
</div>
</div>
Вот как будет выглядеть результат: