Bootstrap 5: Кнопки и группы кнопок

Создание кнопок

Для создания кнопки используется тег <button>. Добавление класса btn указывает Bootstrap, что это кнопка. Для выбора темы используется дополнительный класс, например, btn-default для стандартной темы.

<button class="btn btn-default">Стандартная</button>

Стиль кнопок применим к <button>, <input type=»button»>, <input type=»submit»> и <a>:

<input type="button" class="btn btn-primary" value="Основная">
<input type="submit" class="btn btn-success" value="Подтвердить">
<a href="#" class="btn btn-info" role="button">Уведомление</a>

В последнем примере role="button" указывает, что ссылка — кнопка.

Доступны классы: btn-primary (синяя), btn-success (зелёная), btn-info (голубая), btn-warning (оранжевая), btn-danger (красная).

Изменение размера

Для изменения размера используются классы: btn-lg (большой), btn-md (средний — по умолчанию), btn-sm (маленький), btn-xs (очень маленький).

<button class="btn btn-default btn-lg">Кнопка</button>
<button class="btn btn-default btn-md">Кнопка</button>
<button class="btn btn-default btn-sm">Кнопка</button>
<button class="btn btn-default btn-xs">Кнопка</button>

Блочные кнопки

Класс btn-block создаёт блочную кнопку, занимающую всю ширину контейнера:

<button class="btn btn-default btn-md btn-block">Блочная кнопка</button>

Состояния кнопок

Класс active имитирует нажатую кнопку:

<button class="btn btn-default btn-md active">Активная кнопка</button>

Класс disabled делает кнопку неактивной:

<button class="btn btn-default btn-md disabled">Неактивная кнопка</button>

Группы кнопок

Для группировки используется контейнер <div> с классом btn-group:

<div class="btn-group">
  <button class="btn btn-default">Параметр 1</button>
  <button class="btn btn-default">Параметр 2</button>
  <button class="btn btn-default">Параметр 3</button>
</div>

Классы для кнопок (btn, btn-primary и т.д.) применимы к <input>, <label>, <a>. В примере с <label> и checkbox data-toggle="buttons" обеспечивает корректное отображение состояния.

<label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Параметр 1
</label>

Расширенные возможности групп

Контейнер <div> с классом btn-toolbar объединяет группы кнопок:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

btn-group-justified растягивает кнопки на всю ширину родительского контейнера. btn-group-vertical располагает кнопки вертикально.

<div class="btn-group-vertical">
    <button class="btn btn-default">Кнопка 1</button>
    <button class="btn btn-default">Кнопка 2</button>
    <button class="btn btn-default">Кнопка 3</button>
</div>

Bootstrap предоставляет эффективные инструменты для создания и стилизации кнопок и их группировки, упрощая разработку веб-интерфейсов.