Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

Iitshekhi kunye nonomathotholo

Yenza ibrowser engaguqukiyo kunye neebhokisi zokukhangela izixhobo ezinqamlezileyo kunye nonomathotholo kunye necandelo lethu lokujonga elibhalwe ngokutsha.

Kweli phepha

Indlela

Iibhokisi zokukhangela ezingagqibekanga zebhrawuza kunye nerediyo zitshintshwa ngoncedo lwe .form-check, uthotho lweeklasi kuzo zombini iintlobo zegalelo eziphucula uyilo kunye nokuziphatha kwezinto zazo zeHTML, ezibonelela ngokwenziwa ngokwezifiso okukhulu kunye nokuhambelana komkhangeli zincwadi. Iibhokisi zokukhangela zezokukhetha enye okanye iinketho ezininzi kuluhlu, ngelixa oonomathotholo bezokukhetha ukhetho olunye kwabaninzi.

Ngokwesakhiwo, imizalwane yethu <input>zizinto <label>ezizalanayo ngokuchaseneyo <input>nengaphakathi <label>. Oku kukwi-verbose kancinane njengoko kufuneka ukhankanye idkunye forneempawu zokunxulumana <input>ne <label>. Sisebenzisa umkhethi wabazalwana ( ~) kuwo onke <input>amazwe ethu, njenga :checkedokanye :disabled. Xa zidityaniswe .form-check-labelneklasi, sinokubhala ngokulula okubhaliweyo kumba ngamnye ngokusekelwe <input>kwimeko.

Iitshekhi zethu zisebenzisa ii-icon ze-Bootstrap zesiko ukubonisa amazwe ahlolisisiweyo okanye angenammiselo.

Iitshekhi

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

Okungamiselwanga

Iibhokisi zokutshekisha zinokusebenzisa udidi :indeterminatelosinga olungelulo xa lucwangciswe ngesandla ngeJavaScript (akukho phawu lukhoyo lweHTML lokuyikhankanya).

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

Kukhubazekile

Yongeza disableduphawu kunye nonxulumano <label>s zilungiswe ngokuzenzekelayo ukuze zitshatise nombala olula ukunceda ukubonisa imeko yegalelo.

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

Oonomathotholo

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

Kukhubazekile

Yongeza disableduphawu kunye nonxulumano <label>s zilungiswe ngokuzenzekelayo ukuze zitshatise nombala olula ukunceda ukubonisa imeko yegalelo.

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

Iiswitshi

Iswitshi inophawu lwebhokisi yokukhangela yesiko kodwa isebenzisa .form-switchiklasi ukunikezela iswitshi yokuguqula. Cinga ukusebenzisa role="switch"ukuhambisa ngokuchanekileyo ngakumbi ubume bolawulo kwiiteknoloji ezincedisayo ezixhasa le ndima. Kwiitekhnoloji zokuncedisa ezindala, iya kubhengezwa nje njengebhokisi yokukhangela eqhelekileyo njengokubuyisela umva. Iiswitshi zikwaxhasa disableduphawu.

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

Okuhlala kukho (kupakishwe)

Ngokungagqibekanga, naliphi na inani leebhokisi zokukhangela kunye nonomathotholo abazalanayo baya kugcinwa ngokuthe nkqo kwaye zibekwe ngokufanelekileyo nge .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>

Nomgca

Qela iibhokisi zokukhangela okanye iirediyo kumqolo othe tye ngokudibanisa .form-check-inlinenakweyiphi .form-check.

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

Ngaphandle kweelebhile

Shiya ukusongwa kweebhokisi .form-checkzokukhangela kunye nerediyo ezingenalo mbhalo wombhalo. Khumbula ukuba usenokubonelela ngolunye uhlobo lwegama elifikelelekayo kwiitekhnoloji ezincedisayo (umzekelo, ukusebenzisa aria-label). Jonga icandelo lokufikeleleka kwefomula ngeenkcukacha.

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

Guqula amaqhosha

Yenza iibhokisi zokukhangela ezifana neqhosha kunye namaqhosha erediyo ngokusebenzisa izimbo .btnkuneziqalelo . La maqhosha aqhoboshele angaphinda adityaniswe kwiqela lamaqhosha ukuba ayafuneka..form-check-label<label>

Ibhokisi yokukhangela amaqhosha okuguqula

<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>
Ngokubonakalayo, la maqhosha ebhokisi yokukhangela ayafana namaqhosha okuguqula iplagi yeqhosha . Nangona kunjalo, zihanjiswa ngokwahlukileyo ngobuchwepheshe obuncedisayo: iibhokisi zokukhangela ziya kubhengezwa ngabafundi besikrini njenge "tshekiweyo"/"ayikhangelwanga" (ekubeni, nangona inkangeleko yazo, iseyibhokisi yokukhangela), ngelixa amaqhosha okuguqula iplagin aya kuba ibhengezwe njenge "iqhosha"/"iqhosha licinezelwe". Ukukhetha phakathi kwezi ndlela zimbini kuya kuxhomekeka kuhlobo loguqulo olwenzayo, kwaye nokuba uguqulo luya kwenza ingqiqo kubasebenzisi xa bebhengezwa njengebhokisi yokukhangela okanye njengeqhosha lokwenyani.

Amaqhosha okuguqula unomathotholo

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

Izimbo ezichaziweyo

Iiyantlukwano ezahlukeneyo ze .btn, ezifana kwizimbo ezahlukeneyo ezidwelisiweyo, ziyaxhaswa.



<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

Izinto eziguquguqukayo

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