Как создать группу кнопок в 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 и ссылок на скрипты. Вы можете просто заменить блок между началом и концом группы кнопок кодом, приведенным в примерах ниже, чтобы создать и протестировать различные стили группы кнопок.

Опция группировки позволяет вам иметь панель инструментов, как упорядочивание, добавляя добавление роль = «панель инструментов» атрибут. Вы также можете использовать группу кнопок вместе с группами ввода для создания панелей инструментов с вводом текста. Пример кода приведен ниже:

<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>

Вот как будет выглядеть результат: