TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как создать группу кнопок Bootstrap 5?

130

Группа кнопок, как следует из названия, представляет собой просто группу кнопок, выровненных вместе, чтобы продемонстрировать их как единый элемент. В нашем предыдущем руководстве по кнопкам мы объяснили, как создавать кнопки с флажками и переключателями, используя концепцию группы кнопок. В этом руководстве мы объясним различные типы групп кнопок на примерах в Bootstrap 5.

Руководство Bootstrap 5 Button Group

Это руководство охватывает следующие главы:

  1. Создание группы горизонтальных кнопок
  2. Панель инструментов группы кнопок
  3. Размер групп кнопок
  4. Вложенная группа кнопок с раскрывающимся списком
  5. Вертикальная группа кнопок
  6. Вложенная вертикальная группа кнопок

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>

«Role» и «aria-label» необязательны и используются в основном с точки зрения доступности для программ чтения с экрана.

Это приведет к следующему результату в браузере.

Как создать группу кнопок Bootstrap 5?

Вышеупомянутый код представляет собой полный код шаблона с использованием CDN CSS и ссылок на скрипты. Вы можете просто заменить блок между началом и концом группы кнопок кодом, приведенным в примерах ниже, чтобы создать и протестировать различные стили группы кнопок.

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

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

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

Это приведет к следующему результату в браузере:

Как создать группу кнопок Bootstrap 5?

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

Приведенный выше код даст результаты, как показано ниже:

Как создать группу кнопок Bootstrap 5?

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="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-info" href="#">Dropdown Link 2</a> </div> </div> </div>

Результат должен выглядеть так:

Как создать группу кнопок Bootstrap 5?

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>

В результате кода должна появиться следующая группа кнопок:

Как создать группу кнопок Bootstrap 5?

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="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-danger" href="#">Dropdown Link 2</a> </div> </div> </div>

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

Как создать группу кнопок Bootstrap 5?

Обратите внимание, что разделенные кнопки не поддерживаются при вертикальном размещении.


Изучите Bootstrap 5 (индекс )


Источник записи: www.webnots.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее