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

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>

Zopanda malire

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

Bokosi losatsimikizika

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>

Wolumala

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

Bokosi loyang'anira loyimitsa

Bokosi loyimitsa loyimitsa

Bokosi lochokiridwa layimitsidwa

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>

Wailesi

Wailesi yofikira

Wailesi yosungidwa

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>

Wolumala

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

Wailesi yoyimitsa

Wayiyo woyimitsidwa woyimitsa

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>

Masinthidwe

Kusintha kuli ndi chizindikiro cha bokosi loyang'ana makonda koma amagwiritsa ntchito .form-switchkalasiyo kuti azitha kusintha. Lingalirani kugwiritsa ntchito role="switch"kuti mufotokozere bwino kwambiri mtundu wa zowongolera ku matekinoloje othandizira omwe amathandizira ntchitoyi. M'matekinoloje akale othandizira, amangolengezedwa ngati bokosi loyang'ana nthawi zonse ngati kubwereranso. Masiwichi amathandiziranso mawonekedwe disabled.

Kusintha kosasintha kwa bokosi lolowera

Chochongedwa cholowera masiwichi checkbox

Kulowetsa kosinthitsa koyimitsa

Kuyika kwa bokosi loyimitsa loyimitsa

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>

Zofikira (zosanjikiza)

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

Bokosi lofikira

Bokosi loyimitsa loyimitsa

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>

Wailesi yofikira

Wailesi yachiwiri yosasinthika

Wailesi yoyimitsa

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>

Motsatana

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

3 (wolumala)

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>

3 (wolumala)

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>

M'mbuyo

Ikani mabokosi anu, mawayilesi, ndi ma switch mbali ina ndi gulu .form-check-reverselosinthira.

Bwezerani bokosi loyang'ana

Bokosi loyang'anira loyimitsa

Bwezeretsani kusintha kwa bokosi lolowera

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>

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.

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>

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

html

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

Chofufuzidwa

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>

Wolumala

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>

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

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>

masitayelo alongosoledwe

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

Kusintha kumodzi
Chofufuzidwa
Wailesi yowona bwino Wailesi yowopsa

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

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