Kugenzura na radiyo

Kora umurongo uhuza-mushakisha hamwe na bokisi igenzura agasanduku na radiyo hamwe na cheque yacu yongeye kwandikwa.

Kuriyi page

Inzira

Mucukumbuzi isanzwe igenzura agasanduku na radiyo byasimbuwe nubufasha bwa .form-check, urukurikirane rwamasomo kubwoko bwombi bwinjiza butezimbere imiterere nimyitwarire yibintu byabo bya HTML, bitanga uburyo bwihariye kandi bwambukiranya mushakisha. Kugenzura agasanduku ni uguhitamo kimwe cyangwa byinshi murutonde, mugihe amaradiyo yo guhitamo inzira imwe muri benshi.

Mu buryo bwubaka, <input>s na <label>s ni ibintu bivukana bitandukanye <input>imbere muri a <label>. Nibisobanuro birenze gato nkuko ugomba kwerekana idnibiranga forguhuza na <input>na <label>. Dukoresha abavandimwe bahitamo ( ~) kuri leta zacu zose <input>, nka :checkedcyangwa :disabled. Iyo duhujwe .form-check-labelnishuri, dushobora guhuza byoroshye inyandiko kuri buri kintu gishingiye kuri <input>leta.

Igenzura ryacu rikoresha ibishushanyo bya Bootstrap byerekana kwerekana leta zagenzuwe cyangwa zitamenyekanye.

Kugenzura

Agasanduku gasanzwe

Kugenzura agasanduku

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>

Kutamenya

Agasanduku gashobora gukoresha :indeterminateicyiciro cya pseudo mugihe ukoresheje intoki ukoresheje JavaScript (nta kiranga HTML kiboneka cyo kubigaragaza).

Kugaragaza agasanduku k'isanduku

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>

Abamugaye

Ongeramo disabledikiranga hamwe nibijyanye na <label>s bihita byandikwa kugirango bihuze nibara ryoroshye kugirango bifashe kwerekana ibyinjira.

Yahagaritswe kugenzura agasanduku

Agasanduku kahagaritswe

Yahagaritswe kugenzura agasanduku

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>

Amaradiyo

Radiyo isanzwe

Radio isanzwe yagenzuwe

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>

Abamugaye

Ongeramo disabledikiranga hamwe nibijyanye na <label>s bihita byandikwa kugirango bihuze nibara ryoroshye kugirango bifashe kwerekana ibyinjira.

Radiyo yamugaye

Abamugaye bagenzuye radio

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>

Guhindura

Ihindura ifite marike yisanduku yihariye ariko ikoresha urwego .form-switchkugirango itange icyerekezo. Tekereza gukoresha role="switch"kugirango ugaragaze neza imiterere yubugenzuzi kuri tekinoroji ifasha iyi nshingano. Mubuhanga bwa kera bufasha, bizatangazwa gusa nkisanduku isanzwe nkigaruka. Guhindura nabyo bishyigikira disabledikiranga.

Mburabuzi Guhindura agasanduku kinjiza

Kugenzura ibintu byahinduwe kugenzura

Yahagaritse guhinduranya agasanduku kinjiza

Yahagaritswe kugenzura ibintu byinjira

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>

Ibisanzwe (byegeranye)

Mburabuzi, umubare uwo ari wo wose wo kugenzura agasanduku na radiyo bihita bivukana bizahagarikwa kandi bihagaritswe neza .form-check.

Agasanduku gasanzwe

Agasanduku kahagaritswe

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>

Radiyo isanzwe

Radiyo ya kabiri isanzwe

Radiyo yamugaye

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>

Umurongo

Itsinda ryisanduku cyangwa amaradiyo kumurongo umwe utambitse wongeyeho icyaricyo .form-check-inlinecyose .form-check.

3 (bamugaye)

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

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>

Subiza inyuma

Shira agasanduku kawe, amaradiyo, na switch kuri kuruhande rutandukanye nicyiciro cyo .form-check-reverseguhindura.

Hindura agasanduku

Yahagaritse kugenzura agasanduku

Hindura uhindure agasanduku kinjiza

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>

Nta kirango

Kureka gupfunyika .form-checkibisanduku na radiyo bidafite inyandiko yanditse. Wibuke gutanga uburyo bumwe bwizina ryoroshye rya tekinoroji ifasha (urugero, gukoresha aria-label). Reba ifishi yerekana igice cyagerwaho kubisobanuro birambuye.

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>

Kanda buto

Kora buto-isa na agasanduku na radio buto ukoresheje uburyo .btnaho gukoresha .form-check-labelkubintu <label>. Utubuto two guhinduranya turashobora gukomeza guterana mumatsinda ya buto niba bikenewe.

Kugenzura agasanduku ka buto

Guhindura umwe

html

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

Kugenzurwa

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>

Abamugaye

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>

Mubigaragara, iyi cheque yisanduku yo guhinduranya buto irasa na buto plugin ihindura buto . Ariko, zitangwa muburyo butandukanye nubuhanga bufasha: kugenzura agasanduku k'isanduku kazatangazwa nabasomyi ba ecran nka "bagenzuwe" / "ntibagenzuwe" (kuva, nubwo bagaragara, baracyari agasanduku k'isanduku), mugihe buto ya plugin yo guhinduranya buto izaba. byatangajwe nka "buto" / "buto ikanda". Guhitamo hagati yubu buryo bubiri bizaterwa nubwoko bwo guhinduranya urimo gukora, kandi niba guhinduranya bizasobanuka kubakoresha mugihe byatangajwe nkigenzura cyangwa nka buto ifatika.

Radio ihinduranya buto

Kugenzurwa Radiyo Abamugaye Radiyo

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>

Imiterere

Impinduka zitandukanye za .btn, nkuburyo butandukanye bwerekanwe, zirashyigikirwa.

Guhindura umwe
Kugenzurwa
Kugenzura intsinzi ya radio Radiyo

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

Ibihinduka

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