Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Awọn sọwedowo ati awọn redio

Ṣẹda ẹrọ aṣawakiri deede ati awọn apoti ayẹwo ẹrọ-agbelebu ati awọn redio pẹlu paati sọwedowo ti a tun kọ patapata.

Lori iwe yi

Ona

Apoti aiyipada ti aṣawakiri ati awọn redio ti rọpo pẹlu iranlọwọ ti .form-check, lẹsẹsẹ awọn kilasi fun awọn oriṣi titẹ sii mejeeji ti o ṣe ilọsiwaju iṣeto ati ihuwasi ti awọn eroja HTML wọn, ti o pese isọdi nla ati aitasera aṣawakiri. Awọn apoti ayẹwo jẹ fun yiyan ọkan tabi pupọ awọn aṣayan ninu atokọ kan, lakoko ti awọn redio wa fun yiyan aṣayan kan lati ọpọlọpọ.

Ni igbekalẹ, awọn <input>s ati <label>s wa jẹ awọn eroja arakunrin ni ilodi si <input>laarin a <label>. Eyi jẹ ọrọ-ọrọ diẹ sii bi o ṣe gbọdọ pato idati forawọn abuda lati ṣe ibatan <input>ati <label>. A lo oluyan arakunrin ( ~) fun gbogbo awọn <input>ipinlẹ wa, bii :checkedtabi :disabled. Nigba ti ni idapo pelu .form-check-labelkilasi, a le awọn iṣọrọ ara awọn ọrọ fun kọọkan ohun kan da lori awọn <input>'state.

Awọn sọwedowo wa lo awọn aami Bootstrap aṣa lati tọkasi awọn ipinlẹ ti a ṣayẹwo tabi ti ko ni ipinnu.

Awọn sọwedowo

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

Ailopin

Awọn apoti ayẹwo le lo :indeterminatekilasi pseudo nigbati a ṣeto pẹlu ọwọ nipasẹ JavaScript (ko si abuda HTML ti o wa fun sisọ rẹ).

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>

Alaabo

Ṣafikun abuda naa disabledati awọn <label>s ti o somọ jẹ aṣa laifọwọyi lati baramu pẹlu awọ fẹẹrẹfẹ lati ṣe iranlọwọ tọka ipo igbewọle naa.

html 
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<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>

Redio

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

Alaabo

Ṣafikun abuda naa disabledati awọn <label>s ti o somọ jẹ aṣa laifọwọyi lati baramu pẹlu awọ fẹẹrẹfẹ lati ṣe iranlọwọ tọka ipo igbewọle naa.

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

Yipada

Iyipada kan ni isamisi ti apoti ayẹwo aṣa ṣugbọn o nlo .form-switchkilasi lati ṣe iyipada iyipada kan. Gbero lilo role="switch"lati ṣe afihan iru iṣakoso ni deede si awọn imọ-ẹrọ iranlọwọ ti o ṣe atilẹyin ipa yii. Ninu awọn imọ-ẹrọ iranlọwọ agbalagba, yoo rọrun ni ikede bi apoti ayẹwo deede bi ipadasẹhin. Awọn iyipada tun ṣe atilẹyin abuda naa disabled.

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

Aiyipada (tolera)

Nipa aiyipada, nọmba eyikeyi ti awọn apoti ayẹwo ati awọn redio ti o jẹ arakunrin lẹsẹkẹsẹ yoo wa ni tolera ati ni aye ni deede pẹlu .form-check.

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

Ni tito

Awọn apoti ayẹwo ẹgbẹ tabi awọn redio lori ila petele kanna nipa fifi kun .form-check-inlinesi eyikeyi .form-check.

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

Yipada

Fi awọn apoti ayẹwo rẹ, awọn redio, ati awọn iyipada si apa idakeji pẹlu .form-check-reversekilasi modifier.

html 
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

Laisi awọn akole

Fi ipari si awọn .form-checkapoti ayẹwo ati awọn redio ti ko ni ọrọ aami. Ranti lati tun pese diẹ ninu awọn orukọ wiwọle fun awọn imọ-ẹrọ iranlọwọ (fun apẹẹrẹ, lilo aria-label). Wo apakan iraye si Akopọ awọn fọọmu fun awọn alaye.

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

Yipada awọn bọtini

Ṣẹda awọn apoti ayẹwo bi bọtini ati awọn bọtini redio nipa lilo .btnawọn aza ju .form-check-labellori awọn <label>eroja. Awọn bọtini yiyi wọnyi le ṣe akojọpọ siwaju si ẹgbẹ bọtini kan ti o ba nilo.

Awọn bọtini iyipada apoti

html 
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
html 
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
html 
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
Ni wiwo, awọn bọtini yiyi apoti apoti jẹ aami kanna si awọn bọtini itanna toggle awọn bọtini . Bibẹẹkọ, wọn ti gbejade ni oriṣiriṣi nipasẹ awọn imọ-ẹrọ iranlọwọ: awọn toggles apoti yoo kede nipasẹ awọn oluka iboju bi “ti a ṣayẹwo”/“kii ṣe ayẹwo” (niwon, laibikita irisi wọn, wọn jẹ awọn apoti ayẹwo ni ipilẹ), lakoko ti awọn bọtini itanna toggle yoo jẹ. kede bi "bọtini"/"bọtini ti a tẹ". Yiyan laarin awọn ọna meji wọnyi yoo dale lori iru toggle ti o ṣẹda, ati boya tabi kii ṣe toggle yoo jẹ oye si awọn olumulo nigbati a kede bi apoti ayẹwo tabi bi bọtini gangan.

Awọn bọtini iyipada redio

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

Awọn aza ti a ṣe ilana

Awọn iyatọ oriṣiriṣi ti .btn, gẹgẹbi orisirisi awọn aza ti a ṣe ilana, ni atilẹyin.



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

Awọn oniyipada

$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 10 3 3 6-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;