Grupy przycisków Bootstrap 5

Grupy przycisków

Bootstrap 5 pozwala na łączenie szeregu przycisków w grupie (w jednym wierszu):

Użyj zintegrowanej .btn-group Klasy <div> Element do tworzenia grup przycisków:

Przykład

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

Spróbuj sam

Uwaga:Nie stosuj rozmiaru przycisków do każdego przycisku w grupie, lecz użyj klasy .btn-group-lg Do dużych grup przycisków lub .btn-group-sm Do celu małych grup przycisków:

Przykład

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

Spróbuj sam

Pionowe grupy przycisków

Bootstrap 5 wspiera również pionowe grupy przycisków:

Użyj klasy .btn-group-vertical Utwórz pionową grupę przycisków:

Przykład

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

Spróbuj sam

Równoległe grupy przycisków

Domyślnie, grupy przycisków są "inline", gdy jest wiele grup przycisków, są one wyświetlane równolegle:

Przykład

<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">Changcheng</button>
  <button type="button" class="btn btn-primary">Changqi</button>
</div>

Spróbuj sam

Zagnieżdżone grupy przycisków i rozwijane menu

Zagnieżdżone grupy przycisków, które mogą tworzyć rozwijane menu (w dalszych rozdziałach dowiecie się więcej o rozwijanych menu):

Przykład

<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="#">Telefon</a>
      <a class="dropdown-item" href="#">Tablet</a>
    </div>
  </div>
</div>

Spróbuj sam