Bootstrap 5 Knappgrupp

Knappgrupper

Bootstrap 5 låter dig kombinera en rad knappar i en knappgrupp (på en rad):

Använd med .btn-group Klassen <div> Element för att skapa knappgrupper:

Exempel

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

Prova själv

Tips:Använd inte knappstorlek för varje knapp i gruppen, utan använd klassen .btn-group-lg För stora knappgrupper eller .btn-group-sm För små knappgrupper:

Exempel

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

Prova själv

Vertikala knappgrupper

Bootstrap 5 stöder också vertikala knappgrupper:

Använd klasser .btn-group-vertical Skapa en vertikal knappgrupp:

Exempel

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

Prova själv

Knapplager sida vid sida

Som standard är knappgrupperna "inline", och flera knappgrupper visas sida vid sida när det finns flera knappgrupper:

Exempel

<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">Hongqi</button>
</div>

Prova själv

Nedsänkta knappgrupper och rullgardinsmenyer

Nedsänkta knappgrupper som kan skapa rullgardinsmenyer (du kommer att lära dig mer om rullgardinsmenyer i efterföljande kapitel):

Exempel

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

Prova själv