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

Як створити групу кнопок Bootstrap 5?

1

Група кнопок, як випливає з назви, – це просто група кнопок, вирівняних разом, щоб продемонструвати їх як єдиний елемент. У нашому попередньому посібнику з кнопок ми пояснили, як створювати кнопки з прапорцями та перемикачами за допомогою концепції групи кнопок. У цьому уроці давайте пояснимо різні типи груп кнопок з прикладами в Bootstrap 5.

Підручник з групи кнопок Bootstrap 5

Цей підручник охоплює такі глави:

  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>

"Роль" та "арія-мітка" є необов’язковими, переважно використовуються з точки зору спеціальних можливостей у програмах для читання з екрана.

Це дасть наступний результат у браузері.

Як створити групу кнопок Bootstrap 5?

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

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

Опція групування дозволяє вам мати розташування панелі інструментів, додаючи атрибут add role = “панель інструментів”. Ви також можете використовувати групу кнопок разом із групами введення для створення панелей інструментів із введенням тексту. Зразок коду наведено нижче:

<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 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі