Групи кнопок Bootstrap 4

Bootstrap 4 дозволяє групувати кнопки в ряд. Використовуйте елемент <div> з класом .btn-groupдля створення групи кнопок:

See the Pen
Групи кнопок
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Порада. Замість застосування розмірів кнопок для кожної кнопки в групі, використовуйте клас .btn-group-lgдля великої групи кнопок або .btn-group-smдля групи малих кнопок: 

See the Pen
Групи кнопок розміри
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

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

Bootstrap 4 також підтримує групи вертикальних кнопок. Використовуйте клас .btn-group-verticalдля створення групи вертикальних кнопок:

See the Pen
Вертикальні групи кнопок
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Групи вкладених кнопок і випадаючі меню

See the Pen
Випадаючі меню
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Роздільна кнопка для відкриття випадаючого меню

See the Pen
Роздільна кнопка для відкриття випадаючого меню
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Вертикальні групи кнопок і випадаюче меню

See the Pen
Вертикальні групи кнопок і випадаюче меню
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

На цьому все! Якщо ви раптом пропустили минулий урок по фреймворку bootstrap 4, можете прочитати його саме зараз!

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/bootstrap4/bootstrap_button_groups.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: