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">Option 1</label>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Checkboxes</h2>
  <p>To style a checkbox, use a container element with a .form-check class, and add .form-check-label to labels, and .form-check-input to the input with type="checkbox".</p>
  <p>The form below contains three checkboxes. The first option is checked by default, and the last option is disabled:</p>
  <form action="/action_page.php">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
      <label class="form-check-label" for="check1">Option 1</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
      <label class="form-check-label" for="check2">Option 2</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" disabled>
      <label class="form-check-label">Option 3</label>
    </div>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

</body>
</html>

Παράδειγμα Επεξήγηση

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

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

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

Κουμπιά ραδιοφώνου

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

Παράδειγμα

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 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">Option 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Option 3
  <label class="form-check-label"></label>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Radio buttons</h2>
  <p>The form below contains three radio buttons. The first option is checked by default, and the last option is disabled:</p>
  <form action="/action_page.php">
    <div class="form-check">
      <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
      <label class="form-check-label" for="radio1">Option 1</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
      <label class="form-check-label" for="radio2">Option 2</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" disabled>
      <label class="form-check-label">Option 3</label>
    </div>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

</body>
</html>

Εναλλαγή Διακόπτες

Εάν θέλετε το πλαίσιο ελέγχου σας να έχει το στυλ του διακόπτη εναλλαγής, χρησιμοποιήστε την κατηγορία .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">Dark Mode</label>
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Toggle Switch</h2>
  <p>Try to submit the form with and without toggling the switch.</p>
  <form action="/action_page.php">
    <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">Dark Mode</label>
    </div>
    <button type="submit" class="btn btn-primary mt-3">Submit</button>
  </form>
</div>

</body>
</html>