Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
in English

Ticheke na swiya-ni-moya

Endla mabokisi yo kambela ya cross-browser na cross-device lama nga cincekiki na swiya-ni-moya hi xiphemu xa hina xa swikambelo lexi tsariweke hi vuntshwa hi ku helela.

Eka tluka leri

Manghenelo

Mabokisi yo kambela ya xiviri ya xihlamusela-marito na swiya-ni-moya swi siviwa hi ku pfuniwa hi .form-check, nxaxamelo wa titlilasi ta tinxaka timbirhi ta ku nghenisa leti antswisaka maendlelo na mahanyelo ya swiaki swa tona swa HTML, leti nyikaka ku cinca lokukulu na ku ringanana ka xihlamusela-marito xo tsemakanya. Mabokisi yo kambela i ya ku hlawula xin’we kumbe swo hlayanyana eka nxaxamelo, kasi swiya-ni-moya i swa ku hlawula ndlela yin’we eka yo tala.

Hi xivumbeko, <input>s na <label>s ya hina i swiaki swa vamakwavo ku hambana na an <input>endzeni ka a <label>. Leswi swi na marito nyana tani hi leswi u faneleke ku boxa idna forswihlawulekisi ku hlanganisa <input>na <label>. Hi tirhisa xihlawulekisi xa vamakwerhu ( ~) eka <input>swifundzha swa hina hinkwaswo, ku fana na :checkedkumbe :disabled. Loko hi hlanganisiwa na .form-check-labeltlilasi, hi nga olova ku endla xitayili xa tsalwa ra nchumu wun’wana na wun’wana hi ku ya hi xiyimo xa <input>'s.

Ticheke ta hina ti tirhisa swifaniso swa Bootstrap swa ntolovelo ku kombisa swiyimo leswi kamberiweke kumbe leswi nga tivekiki.

Ku kamberiwa

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

Ku nga tiyimiselanga

Mabokisi yo kambela ya nga tirhisa :indeterminatetlilasi ya vuxisi loko yi vekiwile hi voko hi ku tirhisa JavaScript (a ku na xihlawulekisi xa HTML lexi kumekaka xo xi boxa).

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

Lamarile

Engetela disabledxihlawulekisi naswona ti- <label>s leti fambelanaka ti endliwa hi ku tisungulela ku fambisana na muvala wo vonikela ku pfuneta ku kombisa xiyimo xa ku nghenisa.

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

Swiya-ni-moya

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

Lamarile

Engetela disabledxihlawulekisi naswona ti- <label>s leti fambelanaka ti endliwa hi ku tisungulela ku fambisana na muvala wo vonikela ku pfuneta ku kombisa xiyimo xa ku nghenisa.

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

Swiwitsi

Swiwitsi swi na mfungho wa bokisi ro kambela ra ntolovelo kambe swi tirhisa .form-switchtlilasi ku humesa swiwitsi swo cinca-cinca. Anakanya hi ku tirhisa role="switch"ku hundzisela hi ndlela leyinene muxaka wa vulawuri eka thekinoloji yo pfuneta leyi seketelaka xiave lexi. Eka thekinoloji ya khale yo pfuneta, yi ta tivisiwa ntsena tanihi bokisi ro kambela ra nkarhi na nkarhi tanihi ku tlhelela endzhaku. Swiwitsi na swona swi seketela disabledxihlawulekisi.

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

Xihlawulekisi (xi hlengeletiwile) .

Hi ku tiyimisela, nhlayo yihi na yihi ya mabokisi yo kambela ni swiya-ni-moya leswi nga makwavo wa le kusuhi swi ta hlanganisiwa hi ndlela leyi yimisiweke naswona swi ta vekiwa hi ndlela leyi faneleke hi .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>

Inline

Hlengeleta mabokisi yo kambela kumbe swiya-ni-moya eka layini yin’we leyi nga etlhelo hi ku engetela .form-check-inlineeka yin’wana ni yin’wana .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>

Handle ka malebvu

Tshika ku phutsela .form-checkka mabokisi yo kambela na swiya-ni-moya leswi nga riki na tsalwa ra lebula. Tsundzuka ku ha nyika xivumbeko xo karhi xa vito leri fikelelaka ra thekinoloji yo pfuneta (xikombiso, ku tirhisa aria-label). Vona xiyenge xa ​​mfikelelo wa nkatsakanyo wa tifomo ku kuma vuxokoxoko.

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

Ku cinca-cinca swikomba-nkarhi

Endla mabokisi yo kambela lama fanaka ni swikomba-nkarhi ni swikomba-nkarhi swa xiya-ni-moya hi ku tirhisa .btnswitayele ematshan’weni yo .form-check-labeltirhisa <label>swiaki. Swikomba-ndlela leswi swi nga ha tlhela swi hlengeletiwa eka ntlawa wa swikomba -nkarhi loko swi laveka.

Swikomba-nkarhi swo cinca-cinca swa bokisi ro kambela

<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>
Hi ku vona, swikomba-ndlela leswi swa bokisi ro kambela swi fana ni swikomba-nkarhi swo cinca-cinca swa plugin ya swikoweto . Kambe, ti hundziseriwa hi ndlela yo hambana hi thekinoloji yo pfuneta: ku cinca-cinca ka bokisi ro kambela ku ta tivisiwa hi vahlayi va xikirini tanihi “leswi nga kamberiwangiki”/“leswi nga kamberiwangiki” (tanihi leswi, ku nga khathariseki ku languteka ka swona, hi xisekelo ma ha ri mabokisi yo kambela), kasi swikomba-nkarhi swa ku cinca-cinca ka plugin ya buti swi ta va tano ku tivisiwa tanihi “button”/“button pressed”. Ku hlawula exikarhi ka maendlelo lawa mambirhi ku ta ya hi muxaka wa ku cinca-cinca loku u ku endlaka, na loko ku cinca-cinca ku ta endla nhlamuselo eka vatirhisi loko ku tivisiwa tanihi bokisi ro kambela kumbe tanihi buti ya xiviri kumbe e-e.

Swikomba-nkarhi swo cinca-cinca swa xiya-ni-moya

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

Switayili leswi andlariweke

Swihlawulekisi swo hambana swa .btn, swo tanihi eka switayele swo hambana-hambana leswi hlamuseriweke, swa seketeriwa.



<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

Swilo leswi cinca-cincaka

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