in English

Έλεγχοι και ραδιόφωνα

Δημιουργήστε συνεπή πλαίσια ελέγχου μεταξύ προγραμμάτων περιήγησης και μεταξύ συσκευών και ραδιόφωνο με το στοιχείο επιταγών που έχουμε ξαναγράψει.

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

Πλησιάζω

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

Δομικά, τα <input>s και <label>τα s μας είναι αδερφικά στοιχεία σε αντίθεση με ένα <input>εντός ενός <label>. Αυτό είναι ελαφρώς πιο αναλυτικό καθώς πρέπει να καθορίσετε idκαι forχαρακτηριστικά για να συσχετίσετε το <input>και <label>. Χρησιμοποιούμε τον επιλογέα αδερφού ( ~) για όλες τις <input>πολιτείες μας, όπως :checkedή :disabled. Όταν συνδυάζεται με την .form-check-labelκλάση, μπορούμε εύκολα να διαμορφώσουμε το κείμενο για κάθε στοιχείο με βάση την <input>κατάσταση '.

Οι επιταγές μας χρησιμοποιούν προσαρμοσμένα εικονίδια Bootstrap για να υποδείξουν επιλεγμένες ή απροσδιόριστες καταστάσεις.

Έλεγχοι

Προεπιλεγμένο πλαίσιο ελέγχου

Επιλεγμένο πλαίσιο ελέγχου

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Ακαθόριστος

Τα πλαίσια ελέγχου μπορούν να χρησιμοποιούν την :indeterminateψευδοκλάση όταν ορίζονται χειροκίνητα μέσω JavaScript (δεν υπάρχει διαθέσιμο χαρακτηριστικό HTML για τον καθορισμό του).

Απροσδιόριστο πλαίσιο ελέγχου

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

άτομα με ειδικές ανάγκες

Προσθέστε το disabledχαρακτηριστικό και τα συσχετισμένα <label>s διαμορφώνονται αυτόματα ώστε να ταιριάζουν με ένα πιο ανοιχτό χρώμα για να υποδεικνύεται η κατάσταση της εισαγωγής.

Απενεργοποιημένο πλαίσιο ελέγχου

Απενεργοποιημένο επιλεγμένο πλαίσιο ελέγχου

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

Ραδιόφωνα

Προεπιλεγμένο ραδιόφωνο

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

άτομα με ειδικές ανάγκες

Απενεργοποιημένο ραδιόφωνο

Απενεργοποιημένο επιλεγμένο ραδιόφωνο

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Διακόπτες

Ένας διακόπτης έχει τη σήμανση ενός προσαρμοσμένου πλαισίου ελέγχου, αλλά χρησιμοποιεί την .form-switchκλάση για να αποδώσει έναν διακόπτη εναλλαγής. Οι διακόπτες υποστηρίζουν επίσης το disabledχαρακτηριστικό.

Είσοδος πλαισίου ελέγχου προεπιλεγμένου διακόπτη

Είσοδος πλαισίου ελέγχου επιλεγμένου διακόπτη

Απενεργοποιημένη είσοδος πλαισίου ελέγχου διακόπτη

Απενεργοποιημένη είσοδος πλαισίου ελέγχου επιλεγμένου διακόπτη

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Προεπιλογή (στοιβάζονται)

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

Προεπιλεγμένο πλαίσιο ελέγχου

Απενεργοποιημένο πλαίσιο ελέγχου

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Προεπιλεγμένο ραδιόφωνο

Δεύτερο προεπιλεγμένο ραδιόφωνο

Απενεργοποιημένο ραδιόφωνο

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Στη γραμμή

Ομαδοποιήστε τα πλαίσια ελέγχου ή τα ραδιόφωνα στην ίδια οριζόντια σειρά προσθέτοντας .form-check-inlineσε οποιαδήποτε .form-check.

3 (Απενεργοποιημένο)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (Απενεργοποιημένο)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Χωρίς ετικέτες

Παραλείψτε την αναδίπλωση .form-checkγια πλαίσια ελέγχου και ραδιόφωνα που δεν έχουν κείμενο ετικέτας. Θυμηθείτε να παρέχετε ακόμα κάποια μορφή προσβάσιμου ονόματος για υποστηρικτικές τεχνολογίες (για παράδειγμα, χρησιμοποιώντας aria-label). Δείτε την ενότητα προσβασιμότητας επισκόπηση φορμών για λεπτομέρειες.

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

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

Δημιουργήστε πλαίσια ελέγχου που μοιάζουν με κουμπιά και κουμπιά επιλογής χρησιμοποιώντας .btnστυλ αντί .form-check-labelγια <label>στοιχεία. Αυτά τα κουμπιά εναλλαγής μπορούν περαιτέρω να ομαδοποιηθούν σε μια ομάδα κουμπιών εάν χρειάζεται.

Κουμπιά εναλλαγής πλαισίου ελέγχου

Μονή εναλλαγή

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Τετραγωνισμένος

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

άτομα με ειδικές ανάγκες

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Οπτικά, αυτά τα κουμπιά εναλλαγής πλαισίου ελέγχου είναι πανομοιότυπα με τα κουμπιά εναλλαγής της προσθήκης κουμπιών . Ωστόσο, μεταφέρονται διαφορετικά από τις υποστηρικτικές τεχνολογίες: οι εναλλαγές πλαισίου ελέγχου θα ανακοινώνονται από τους αναγνώστες οθόνης ως "επιλεγμένες"/"μη επιλεγμένες" (καθώς, παρά την εμφάνισή τους, είναι ουσιαστικά πλαίσια ελέγχου), ενώ τα κουμπιά εναλλαγής προσθήκης κουμπιών θα είναι ανακοινώθηκε ως "κουμπί"/"κουμπί πατημένο". Η επιλογή μεταξύ αυτών των δύο προσεγγίσεων θα εξαρτηθεί από τον τύπο εναλλαγής που δημιουργείτε και από το εάν η εναλλαγή θα έχει νόημα για τους χρήστες όταν ανακοινωθεί ως πλαίσιο ελέγχου ή ως πραγματικό κουμπί.

Κουμπιά εναλλαγής ραδιοφώνου

Τετραγωνισμένος Ραδιόφωνο άτομα με ειδικές ανάγκες Ραδιόφωνο

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

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

Υποστηρίζονται διάφορες παραλλαγές του .btn, όπως στα διάφορα στυλ που περιγράφονται.

Μονή εναλλαγή
Τετραγωνισμένος
Ελεγμένο ραδιόφωνο επιτυχίας Ραδιόφωνο κινδύνου

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

Sass

Μεταβλητές

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 1px solid rgba($black, .25);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;