Macheke ndi mawayilesi

Pangani ma kusakatula osasinthasintha komanso ma cheke ndi ma wayilesi omwe ali ndi gawo lathu lolembetsedwanso.

Patsamba ili

Njira

Mabokosi osasinthika a osatsegula ndi mawailesi amasinthidwa mothandizidwa ndi .form-check, magulu angapo amitundu yonse yolowetsa omwe amawongolera masanjidwe ndi machitidwe azinthu zawo za HTML, zomwe zimapereka kusintha kwakukulu komanso kusasinthika kwa msakatuli. Mabokosi amasankha chimodzi kapena zingapo pamndandanda, pomwe mawayilesi ndi osankha njira imodzi kuchokera ambiri.

Mwamakhalidwe, abale athu <input>ndi <label>abale athu ndi abale m'malo <input>mwa a <label>. Izi ndizowonjezera pang'ono monga momwe muyenera kufotokozera idndi forzikhumbo kuti mugwirizane <input>ndi <label>. Timagwiritsa ntchito chosankha abale ( ~) m'maboma athu <input>onse, monga :checkedkapena :disabled. Tikaphatikiza ndi .form-check-labelkalasi, titha kupanga masitayilo amtundu uliwonse motengera momwe <input>'s state.

Macheke athu amagwiritsa ntchito zithunzi za Bootstrap kuwonetsa maiko osatsimikizika.

Macheke

Bokosi lofikira

Chochongani bokosi

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

Zopanda malire

Mabokosi atha kugwiritsa ntchito :indeterminatekalasi yabodza ikakhazikitsidwa pamanja kudzera pa JavaScript (palibe mawonekedwe a HTML ofotokozera).

Bokosi losatsimikizika

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

Wolumala

Onjezani mawonekedwewo disabledndipo ma <label>s ogwirizana amasinthidwa okha kuti agwirizane ndi mtundu wopepuka kuti athandizire kuwonetsa zomwe zalowetsedwa.

Cholembera choyimitsidwa

Bokosi lochokiridwa layimitsidwa

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

Wailesi

Wailesi yofikira

Wailesi yosungidwa

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

Wolumala

Onjezani mawonekedwewo disabledndipo ma <label>s ogwirizana amasinthidwa okha kuti agwirizane ndi mtundu wopepuka kuti athandizire kuwonetsa zomwe zalowetsedwa.

Wailesi yoyimitsa

Wayiyo woyimitsidwa woyimitsa

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

Masinthidwe

Kusintha kuli ndi chizindikiro cha bokosi loyang'ana makonda koma amagwiritsa ntchito .form-switchkalasiyo kuti azitha kusintha. Masiwichi amathandiziranso mawonekedwe disabled.

Kusintha kosasintha kwa bokosi lolowera

Chochongedwa cholowera masiwichi checkbox

Kulowetsa kosinthitsa koyimitsa

Zayimitsidwa zolowetsa masinthidwe osankhidwa

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

Zofikira (zosanjikiza)

Mwachisawawa, chiwerengero chilichonse cha mabokosi ndi mawailesi omwe ndi abale apamtima azisakanizidwa molunjika ndikusiyanitsidwa moyenerera ndi .form-check.

Bokosi lofikira

Cholembera choyimitsidwa

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

Wailesi yofikira

Wailesi yokhazikika yachiwiri

Wailesi yoyimitsa

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

Motsatana

Gulu mabokosi kapena mawayilesi pamzere wopingasa womwewo powonjezera .form-check-inline..form-check

3 (wolumala)

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

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

Popanda zilembo

Siyani kukulunga .form-checkmabokosi ndi mawayilesi omwe alibe zilembo. Kumbukirani kuperekabe mtundu wina wa dzina lofikirika la matekinoloje othandizira (mwachitsanzo, kugwiritsa ntchito aria-label). Onani gawo lachidule la mafomu kuti mumve zambiri.

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

Sinthani mabatani

Pangani mabokosi ngati mabatani ndi mabatani a wailesi pogwiritsa ntchito .btnmasitayelo m'malo motengera .form-check-labelzinthu <label>. Mabatani awa amathanso kuikidwa m'magulu a batani ngati pakufunika.

Mabatani osinthira bokosi

Kusintha kumodzi

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

Chofufuzidwa

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

Wolumala

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

M'mawonekedwe, mabatani osinthira mabokosi awa ali ofanana ndi mabatani osinthira mabatani . Komabe, zimaperekedwa mosiyana ndi matekinoloje othandizira: zosintha zamabokosi zidzalengezedwa ndi owerenga zenera ngati "ofufuzidwa"/"osafufuzidwa" (popeza, ngakhale akuwoneka, akadali mabokosi otsimikizira), pomwe mabatani osinthira mabatani adzakhala. adalengezedwa ngati "batani"/"batani latsitsidwa". Kusankha pakati pa njira ziwirizi kudzadalira mtundu wakusintha komwe mukupanga, komanso ngati kusinthaku kudzakhala komveka kwa ogwiritsa ntchito akalengezedwa ngati bokosi loyang'anira kapena ngati batani lenileni.

Mabatani osinthira wailesi

Chofufuzidwa Wailesi Wolumala Wailesi

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

masitayelo alongosoledwe

Mitundu yosiyanasiyana ya .btn, monga masitayelo osiyanasiyana ofotokozedwa, imathandizidwa.

Kusintha kumodzi
Chofufuzidwa
Wailesi yowona bwino Wailesi yowopsa

<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

Zosintha

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