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

Группа кнопок

Bootstrap 5 позволяет комбинировать набор кнопок в группе (в строке):

Используйте классы с .btn-group класса <div> Элемент для создания группы кнопок:

Пример

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Попробуйте сами

Совет:Не применяйте размер кнопок ко всем кнопкам в группе, а используйте класс .btn-group-lg Для больших кнопочных групп или .btn-group-sm Для малых кнопочных групп:

Пример

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Попробуйте сами

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

Bootstrap 5 также поддерживает вертикальные группы кнопок:

Используйте класс .btn-group-vertical Создание вертикальной группы кнопок:

Пример

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Попробуйте сами

Строковые группы кнопок

По умолчанию, группы кнопок являются "inline", и при наличии нескольких групп кнопок они будут отображаться в виде строки:

Пример

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Geely</button>
  <button type="button" class="btn btn-primary">Great Wall</button>
  <button type="button" class="btn btn-primary">Chery</button>
</div>

Попробуйте сами

Вложенные группы кнопок и выпадающие меню

Вложенные группы кнопок могут создавать выпадающие меню (более подробная информация о выпадающих меню будет предоставлена в后面的 главах):

Пример

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomi</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Телефон</a>
      <a class="dropdown-item" href="#">Планшет</a>
    </div>
  </div>
</div>

Попробуйте сами