Ομάδες Κουμπιών 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>

Δοκιμάστε το προσωπικά

Παράλληλα κουμπιά ομάδας

By default, the button group is "inline", and multiple button groups are displayed side by side when there are multiple button groups:

Παράδειγμα

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

Δοκιμάστε το προσωπικά