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

Ομαδοποιήστε μια σειρά κουμπιών μαζί σε μια γραμμή με την ομάδα κουμπιών και ενεργοποιήστε τα με JavaScript.

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

Τυλίξτε μια σειρά από κουμπιά .btnμε .btn-group. Προσθέστε μια προαιρετική συμπεριφορά ραδιοφώνου JavaScript και στυλ πλαισίου ελέγχου με την προσθήκη κουμπιών μας .

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

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

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

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

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

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-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-secondary">8</button>
  </div>
</div>

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

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </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-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </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-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

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

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

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

<div class="btn-group-vertical">
  ...
</div>