Ομάδα κουμπιών

Ομαδοποιήστε μια σειρά από κουμπιά σε μια γραμμή ή στοιβάστε τα σε μια κάθετη στήλη.

Σε αυτήν την σελίδα

Βασικό παράδειγμα

Τυλίξτε μια σειρά από κουμπιά .btnμε .btn-group.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Βεβαιωθείτε ότι είναι σωστό `role`και δώστε μια ετικέτα

Προκειμένου οι υποστηρικτικές τεχνολογίες (όπως οι συσκευές ανάγνωσης οθόνης) να μεταδώσουν ότι μια σειρά κουμπιών είναι ομαδοποιημένη, roleπρέπει να παρέχεται ένα κατάλληλο χαρακτηριστικό. Για ομάδες κουμπιών, αυτό θα ήταν role="group", ενώ οι γραμμές εργαλείων θα πρέπει να έχουν ένα role="toolbar".

Επιπλέον, στις ομάδες και τις γραμμές εργαλείων θα πρέπει να δίνεται σαφής ετικέτα, καθώς οι περισσότερες υποστηρικτικές τεχνολογίες διαφορετικά δεν θα τις ανακοινώσουν, παρά την παρουσία του σωστού χαρακτηριστικού ρόλου. Στα παραδείγματα που παρέχονται εδώ, χρησιμοποιούμε aria-label, αλλά εναλλακτικές όπως aria-labelledbyμπορούν επίσης να χρησιμοποιηθούν.

Αυτές οι κλάσεις μπορούν επίσης να προστεθούν σε ομάδες συνδέσμων, ως εναλλακτική λύση στα .navστοιχεία πλοήγησης .

Ενεργός σύνδεσμος Σύνδεσμος Σύνδεσμος

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Μικτά στυλ

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Περιγραμμένα στυλ

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Ομάδες πλαισίου ελέγχου και κουμπιών επιλογής

Συνδυάστε το πλαίσιο ελέγχου που μοιάζει με κουμπί και τα κουμπιά εναλλαγής ραδιοφώνου σε μια ομάδα κουμπιών απρόσκοπτης εμφάνισης.

Πλαίσιο ελέγχου 1 Πλαίσιο ελέγχου 2 Πλαίσιο ελέγχου 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Ραδιόφωνο 1 Ραδιόφωνο 2 Ραδιόφωνο 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Συνδυάστε σετ ομάδων κουμπιών σε γραμμές εργαλείων κουμπιών για πιο σύνθετα στοιχεία. Χρησιμοποιήστε τις τάξεις βοηθητικών προγραμμάτων όπως απαιτείται για να χωρίσετε ομάδες, κουμπιά και άλλα.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

Μη διστάσετε να συνδυάσετε ομάδες εισόδου με ομάδες κουμπιών στις γραμμές εργαλείων σας. Παρόμοια με το παραπάνω παράδειγμα, πιθανότατα θα χρειαστείτε κάποια βοηθητικά προγράμματα για να τοποθετήσετε τα πράγματα σωστά.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Κόλλα

Αντί να εφαρμόζετε κατηγορίες μεγέθους κουμπιών σε κάθε κουμπί μιας ομάδας, απλώς προσθέστε .btn-group-*σε κάθε .btn-group, συμπεριλαμβανομένου του καθενός κατά την ένθεση πολλών ομάδων.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Φωλιάζοντας

Τοποθετήστε ένα .btn-groupμέσα σε ένα άλλο .btn-groupόταν θέλετε τα αναπτυσσόμενα μενού να αναμειγνύονται με μια σειρά από κουμπιά.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Κάθετη παραλλαγή

Κάντε ένα σύνολο κουμπιών να εμφανίζεται κατακόρυφα στοιβαγμένο και όχι οριζόντια. Τα αναπτυσσόμενα κουμπιά διαχωρισμού δεν υποστηρίζονται εδώ.