in English

Cecuri și radiouri

Creați casete de selectare și radiouri coerente între browsere și dispozitive cu componenta noastră de verificări complet rescrisă.

Pe aceasta pagina

Abordare

Casetele de selectare și radiourile implicite ale browserului sunt înlocuite cu ajutorul .form-check, o serie de clase pentru ambele tipuri de intrare care îmbunătățește aspectul și comportamentul elementelor lor HTML, care oferă o personalizare mai mare și o consecvență între browsere. Casetele de selectare sunt pentru a selecta una sau mai multe opțiuni dintr-o listă, în timp ce radiourile sunt pentru a selecta o opțiune din mai multe.

Din punct de vedere structural, <input>s și s noștri <label>sunt elemente frați, spre deosebire de un <input>în interiorul unui <label>. Acest lucru este puțin mai detaliat, deoarece trebuie să specificați idși foratributele pentru a lega <input>și <label>. Folosim selectorul de frați ( ~) pentru toate <input>stările noastre, cum ar fi :checkedsau :disabled. Când sunt combinate cu .form-check-labelclasa, putem stila cu ușurință textul pentru fiecare articol în funcție de <input>starea lui.

Verificările noastre folosesc pictograme Bootstrap personalizate pentru a indica stări bifate sau nedeterminate.

Cecuri

Caseta de selectare implicită

Caseta de selectare bifată

<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>

Nedeterminat

Casetele de selectare pot utiliza :indeterminatepseudoclasa atunci când se setează manual prin JavaScript (nu există un atribut HTML disponibil pentru specificarea acesteia).

Casetă de selectare nedeterminată

<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>

Dezactivat

Adăugați disabledatributul și <label>s-urile asociate sunt stilate automat pentru a se potrivi cu o culoare mai deschisă pentru a ajuta la indicarea stării intrării.

Caseta de selectare dezactivată

<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>

Radiouri

Radio implicit

Radio verificată implicit

<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>

Dezactivat

Adăugați disabledatributul și <label>s-urile asociate sunt stilate automat pentru a se potrivi cu o culoare mai deschisă pentru a ajuta la indicarea stării intrării.

Radio dezactivat

Radio verificat dezactivat

<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>

Comutatoare

Un comutator are marcajul unei casete de selectare personalizată, dar folosește .form-switchclasa pentru a reda un comutator de comutare. Luați în considerare utilizarea role="switch"pentru a transmite mai precis natura controlului către tehnologiile de asistență care sprijină acest rol. În tehnologiile de asistență mai vechi, acesta va fi anunțat pur și simplu ca o casetă de selectare obișnuită ca alternativă. Comutatoarele acceptă, de asemenea, disabledatributul.

Intrare casetă de selectare a comutatorului implicit

S-a bifat intrarea casetei de selectare a comutatorului

Intrarea casetei de selectare a comutatorului a fost dezactivată

Intrarea casetei de selectare a comutatorului bifat dezactivată

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" 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" role="switch" 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" role="switch" 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" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Implicit (stivuit)

În mod implicit, orice număr de casete de selectare și radiouri care sunt frați imediate vor fi stivuite vertical și distanțate corespunzător cu .form-check.

Caseta de selectare implicită

Caseta de selectare dezactivată

<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>

Radio implicit

Al doilea radio implicit

Radio dezactivat

<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>

In linie

Grupați casetele de selectare sau radiourile pe același rând orizontal adăugând .form-check-inlinela orice .form-check.

3 (dezactivat)

<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 (dezactivat)

<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>

Fara etichete

Omiteți împachetarea .form-checkcasetelor de selectare și a radiourilor care nu au text de etichetă. Nu uitați să furnizați în continuare o formă de nume accesibil pentru tehnologiile de asistență (de exemplu, folosind aria-label). Consultați secțiunea de accesibilitate privind prezentarea generală a formularelor pentru detalii.

<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>

Butoanele de comutare

Creați casete de selectare asemănătoare butoanelor și butoane radio utilizând .btnmai degrabă stiluri decât .form-check-labelpe <label>elemente. Aceste butoane de comutare pot fi grupate în continuare într-un grup de butoane, dacă este necesar.

Butoane de comutare a casetei de selectare

Comutare unică

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

Verificat

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

Dezactivat

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

Din punct de vedere vizual, aceste butoane de comutare a casetei de selectare sunt identice cu butoanele de comutare a pluginului pentru butoane . Cu toate acestea, ele sunt transmise diferit de tehnologiile de asistență: comutatoarele casetelor de selectare vor fi anunțate de cititorii de ecran ca „bifate”/„nebifate” (deoarece, în ciuda aspectului lor, ele sunt, în principiu, încă casete de selectare), în timp ce butoanele de comutare a pluginului pentru butoane vor fi anunțat ca „buton”/„buton apăsat”. Alegerea dintre aceste două abordări va depinde de tipul de comutare pe care îl creați și de dacă comutatorul va avea sens sau nu pentru utilizatori atunci când este anunțat ca o casetă de selectare sau ca un buton real.

Butoane de comutare radio

Verificat Radio Dezactivat Radio

<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>

Stiluri conturate

Sunt acceptate diferite variante ale .btn, cum ar fi diferitele stiluri subliniate.

Comutare unică
Verificat
Radio de succes verificat Radio pericol

<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

Variabile

$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;