Κουμπιά Επιλογής του Bootstrap 5

Κουμπιά επιλογής

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

Παράδειγμα

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">Επιλογή 1</label>
</div>

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

πρότυπος ερμηνεία

Για να ρυθμίσετε το στυλ του κουμπιού επιλογής, χρησιμοποιήστε class="form-check" το περιβάλλον πακέτο, για να διασφαλίσετε ότι η ετικέτα και το κουμπί επιλογής έχουν κατάλληλο περιθώριο.

τότε, μετακινήστε .form-check-label κλάση προσθήκη στο στοιχείο ετικέτας και μετά .form-check-input Προσθέστε .form-check στο κουτί, για να ρυθμίσετε σωστά το στυλ του πλαίσιου επιλογής.

Αν θέλετε να επιλέξετε προεπιλεγμένο το πλαίσιο επιλογής, χρησιμοποιήστε checked Προσόντα.

Κουμπιά Επιλογής

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

Παράδειγμα

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Επιλογή 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Επιλογή 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Επιλογή 3
  <label class="form-check-label"></label>
</div>

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

Κουμπί Ενεργοποίησης

Αν θέλετε να μετατρέψετε το πλαίσιο επιλογής σε μορφή κουμπιού επιλογής, χρησιμοποιήστε .form-switch Κλάση και .form-check Χρήση Κουτίων:

Παράδειγμα

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">Μονόχρωμη Μόδα</label>
</div>

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