Bootstrap 5 Button Group

Button Group

Bootstrap 5 ay nagbibigay ng kapangyarihan sa iyo na i-combine ang isang serye ng button sa isang group ng button (sa isang linya):

Gamitin ang may .btn-group Ang klase <div> Elemento upang lumikha ng button group:

Mga Halimbawa

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

Subukan ang sarili

Paalala:Huwag gamitin ang laki ng button sa bawat button sa grupo, kundi gamitin ang klase .btn-group-lg Para sa malaking button group o upang .btn-group-sm Para sa maliit na button group:

Mga Halimbawa

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

Subukan ang sarili

Vertical Button Group

Bootstrap 5 ay sumusuporta rin sa vertical button group:

Gamitin ang klase .btn-group-vertical Lumikha ng vertical button group:

Mga Halimbawa

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

Subukan ang sarili

Parallel Button Group

Sa karamihan na kasalukuyan, ang grupo ng button ay "inline", kung may ilang grupo ng button, magpapakita sila nang sama-sama:

Mga Halimbawa

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

Subukan ang sarili

Nakalulugmang grupo ng button at dropdown menu

Nakalulugmang grupo ng button, puwedeng lumikha ng dropdown menu (makikita mo sa susunod na mga kabanata ang mas maraming tungkol sa dropdown menu):

Mga Halimbawa

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

Subukan ang sarili