Nā leka a me nā lekiō

E hana i nā pahu hoʻopaʻa keʻa a me nā mea lekiō a me nā lekiō me kā mākou mea hōʻoia i kākau hou ʻia.

Ma kēia ʻaoʻao

Hoʻokokoke

Hoʻololi ʻia nā pahu pahu pahu paʻamau a me nā lekiō me ke kōkua o .form-check, he pūʻulu papa no nā ʻano hoʻokomo ʻelua e hoʻomaikaʻi ai i ka hoʻolālā a me ke ʻano o kā lākou mau mea HTML, e hāʻawi i ka hoʻopilikino ʻoi aku a me ka paʻa o ka polokalamu kele pūnaewele. No ke koho ʻana i hoʻokahi a i ʻole kekahi mau koho i loko o kahi papa inoa, ʻo nā lekiō no ke koho ʻana i hoʻokahi koho mai nā mea he nui.

Ma ke ʻano, ʻo kā mākou <input>s a me <label>s he mau mea kaikunāne e kūʻē i kahi i <input>loko o kahi <label>. ʻOi aku ka liʻiliʻi o kēia no ka mea pono ʻoe e wehewehe ida me fornā ʻano e pili ai i ka <input>a me <label>. Hoʻohana mākou i ka mea koho kaikunāne ( ~) no kā mākou <input>mokuʻāina āpau, like a i :checkedʻole :disabled. Ke hui pū ʻia me ka .form-check-labelpapa, hiki iā mākou ke hana maʻalahi i ke kikokikona no kēlā me kēia mea ma muli o ke kūlana o ka <input>'āina.

Hoʻohana kā mākou mau loiloi i nā kiʻi Bootstrap maʻamau e hōʻike i nā mokuʻāina i hoʻopaʻa ʻia a ʻike ʻole paha.

Nānā

Pahu pahu paʻamau

Pahu hoʻopaʻa ʻia

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

ʻAʻole maopopo

Hiki i nā pahu pahu ke hoʻohana i ka :indeterminatepapa pseudo ke hoʻonohonoho lima ʻia ma o JavaScript (ʻaʻohe ʻano HTML i loaʻa no ka wehewehe ʻana).

Pahu koho ʻole

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

Kinohi

Hoʻohui i ka ʻano disableda me nā <label>s pili e hoʻohālikelike ʻia me kahi kala ʻoi aku ka māmā e kōkua i ke kuhikuhi ʻana i ke kūlana o ka mea hoʻokomo.

Hoʻopaʻa pahu pahu

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

Lekiō

Lekiō paʻamau

Lekiō paʻamau i nānā ʻia

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

Kinohi

Hoʻohui i ka ʻano disableda me nā <label>s pili e hoʻohālikelike ʻia me kahi kala ʻoi aku ka māmā e kōkua i ke kuhikuhi ʻana i ke kūlana o ka mea hoʻokomo.

Lekiō pio

Ua hoʻopaʻa ʻia ka lekiō

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

Nā hoʻololi

Loaʻa i kahi hoʻololi ka hōʻailona o kahi pahu pahu maʻamau akā hoʻohana i ka .form-switchpapa e hana i kahi hoʻololi hoʻololi. E noʻonoʻo e hoʻohana role="switch"no ka hoʻopuka pololei ʻana i ke ʻano o ka mana i nā ʻenehana kōkua e kākoʻo ana i kēia kuleana. I nā ʻenehana kōkua kahiko, e hoʻolaha wale ʻia ʻo ia he pahu pahu maʻamau ma ke ʻano he hāʻule. Kākoʻo nā hoʻololi i ke disabledʻano.

Hoʻokomo pahu pahu hoʻololi paʻamau

Hoʻopili ʻia ka hoʻokomo pahu pahu hoʻololi

Hoʻopau i ka hoʻokomo pahu pahu hoʻololi

Hoʻopaʻa ʻia ka hoʻokomo ʻana i ka pahu pahu hoʻololi

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

Paʻamau (hui ʻia)

ʻO ka mea paʻamau, e hoʻopaʻa pololei ʻia kekahi helu o nā pahu pahu a me nā lekiō he kaikunāne e pili pono ana me .form-check.

Pahu pahu paʻamau

Hoʻopaʻa pahu pahu

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

Lekiō paʻamau

Lekiō paʻamau lua

Lekiō pio

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

Inline

E hui pū i nā pahu a i ʻole nā lekiō ma ka lālani hoʻokahi ma ka hoʻohui .form-check-inlineʻana i kekahi .form-check.

3 (pololei)

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

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

ʻAʻohe lepili

Haʻalele i ka wahī .form-checkʻana no nā pahu pahu a me nā lekiō ʻaʻohe kikokikona lepili. E hoʻomanaʻo i ka hāʻawi ʻana i kekahi ʻano inoa hiki ke loaʻa no nā ʻenehana kōkua (e like me ka hoʻohana ʻana aria-label). E ʻike i ka ʻaoʻao o ka nānā ʻana i nā palapala no nā kikoʻī.

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

Hoʻololi i nā pihi

E hana i nā pahu pahu e like me ke pihi a me nā pihi lekiō ma o ka hoʻohana ʻana i nā .btnkaila ma mua .form-check-labelo nā <label>mea. Hiki ke hoʻohui hou ʻia kēia mau pihi hoʻololi i kahi hui pihi inā pono.

Nā pihi huli pahu pahu

Hoʻololi hoʻokahi

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

Hoʻopaʻa ʻia

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

Kinohi

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

ʻIke ʻia, ʻano like kēia mau pihi hoʻololi pahu pahu me nā pihi hoʻololi . Eia nō naʻe, ʻokoʻa ka lawe ʻia ʻana e nā ʻenehana kōkua: e hoʻolaha ʻia nā pahu pahu pahu e ka poʻe heluhelu heluhelu ma ke ʻano he "checked" / "ʻaʻole i nānā ʻia" (no ka mea, ʻoiai ke ʻano o ko lākou ʻano, he mau pahu pahu paʻa nō ia), i hoʻolaha ʻia ma ke ʻano he "pihi"/" pihi kaomi". ʻO ka koho ma waena o kēia mau ala ʻelua e hilinaʻi ʻia i ke ʻano o ka toggle āu e hana nei, a inā paha e hoʻomaopopo ʻia ka toggle i nā mea hoʻohana ke hoʻolaha ʻia ma ke ʻano he pahu pahu a i ʻole he pihi maoli.

Nā pihi hoʻololi lekiō

Hoʻopaʻa ʻia Lekiō Kinohi Lekiō

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

Nā ʻano i wehewehe ʻia

Kākoʻo ʻia nā ʻano ʻokoʻa like ʻole o .btn, e like me nā ʻano kikoʻī like ʻole.

Hoʻololi hoʻokahi
Hoʻopaʻa ʻia
Ua nānā ʻia ka lekiō holomua Lekiō pilikia

<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

Nā mea hoʻololi

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