Chèk ak radyo

Kreye kaz ak radyo ki konsistan kwa-navigatè ak kwa-aparèy ak eleman chèk konplètman reekri nou an.

Nan paj sa a

Apwòch

Bwat ak radyo defo navigatè yo ranplase ak èd .form-check, yon seri klas pou tou de kalite opinyon ki amelyore layout ak konpòtman eleman HTML yo, ki bay pi gwo personnalisation ak konsistans kwaze navigatè. Bwat yo se pou chwazi youn oswa plizyè opsyon nan yon lis, pandan y ap radyo yo se pou chwazi yon opsyon nan plizyè.

Estriktirèl, <input>s ak <label>s nou yo se eleman frè ak sè yo opoze ak yon <input>nan yon <label>. Sa a se yon ti kras plis verbose kòm ou dwe presize idak foratribi yo gen rapò <input>ak ak <label>. Nou itilize seleksyon frè ak sè ( ~) pou tout eta nou <input>yo, tankou :checkedoswa :disabled. Lè yo konbine avèk .form-check-labelklas la, nou ka fasilman style tèks la pou chak atik ki baze sou <input>eta a.

Chèk nou yo sèvi ak ikon Bootstrap koutim pou endike eta tcheke oswa endetèmine.

Chèk

Default kaz

Tcheke kaz

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

Endetèmine

Bwat chèk yo ka itilize :indeterminatepseudo klas la lè yo mete manyèlman atravè JavaScript (pa gen okenn atribi HTML ki disponib pou espesifye li).

Bwat endetèmine

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

Andikape

Ajoute disabledatribi a ak <label>s ki asosye yo otomatikman style pou matche ak yon koulè pi lejè pou ede endike eta opinyon an.

Bwat enfim

Enfim tcheke kaz

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

Radyo

Default radyo

Default tcheke radyo

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

Andikape

Ajoute disabledatribi a ak <label>s ki asosye yo otomatikman style pou matche ak yon koulè pi lejè pou ede endike eta opinyon an.

Radyo andikape

Enfim tcheke radyo

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

Chanjman

Yon switch gen maketing yon kaz koutim men li sèvi ak .form-switchklas la pou rann yon switch baskile. Konsidere itilize role="switch"pou transmèt plis presizyon nati kontwòl la bay teknoloji asistans ki sipòte wòl sa a. Nan ansyen teknoloji asistans, li pral tou senpleman anonse kòm yon kaz regilye kòm yon sekou. Bouton tou sipòte disabledatribi a.

Default switch checkbox input

Tcheke opinyon kaz pou chanje

Enfim chanjman kaz D'

Enfim tcheke kaz switch switch

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

Default (anpille)

Pa default, nenpòt kantite kaz ak radyo ki se frè ak sè imedyat yo pral anpile vètikal ak yon espas apwopriye ak .form-check.

Default kaz

Bwat enfim

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

Default radyo

Dezyèm radyo default

Radyo andikape

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

Nan liy

Gwoup kaz oswa radyo sou menm ranje orizontal la lè w ajoute .form-check-inlinenan nenpòt .form-check.

3 (enfim)

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

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

San etikèt

Omite anbalaj la .form-checkpou kaz ak radyo ki pa gen okenn tèks etikèt. Sonje toujou bay kèk fòm non aksesib pou teknoloji asistans (pa egzanp, lè l sèvi avèk aria-label). Gade seksyon aksè fòm yo pou plis detay.

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

Bouton baskile

Kreye kaz ki sanble ak bouton radyo yo lè w itilize .btnestil olye ke .form-check-labelsou <label>eleman yo. Bouton baskile sa yo ka gwoupe plis nan yon gwoup bouton si sa nesesè.

Bòton baskile kaz

Single baskile

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

Tcheke

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

Andikape

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

Vizyèlman, bouton deklanchman kaz sa yo idantik ak bouton deklanchman plugin plugin yo . Sepandan, teknoloji asistans yo transmèt yo yon fason diferan: lektè ekran yo pral anonse kaz kaz yo kòm "tcheke" / "pa tcheke" (piske, malgre aparans yo, yo fondamantalman toujou kaz), alòske bouton bouton plugin plugin yo pral. te anonse kòm "bouton"/"bouton peze". Chwa ki genyen ant de apwòch sa yo pral depann de ki kalite baskil w ap kreye a, epi si wi ou non baskil la pral fè sans pou itilizatè yo lè yo anonse kòm yon kaz oswa kòm yon bouton aktyèl.

Bouton baskile radyo

Tcheke Radyo Andikape Radyo

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

Dekri estil

Diferan variantes de .btn, tankou nan diferan estil ki dekri, yo sipòte.

Single baskile
Tcheke
Tcheke siksè radyo Danger radyo

<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

Varyab

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