Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
in English

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.

Mwamadongosolo, <input>s ndi <label>abale athu ndi abale athu mosiyana ndi <input>mkati mwa <label>. Izi ndizowonjezera pang'ono monga momwe muyenera kufotokozera idndi forzikhumbo kuti mugwirizane <input>ndi <label>. Timagwiritsa ntchito chosankha cha abale ( ~) m'maboma athu <input>onse, monga :checkedkapena :disabled. Tikaphatikiza ndi .form-check-labelkalasi, titha kupanga masitayilo osavuta a chinthu chilichonse motengera <input>boma.

Macheke athu amagwiritsa ntchito zithunzi za Bootstrap kuwonetsa maiko osatsimikizika.

Macheke

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

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

<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

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

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

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

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

Motsatana

Gulu mabokosi kapena mawayilesi pamzere wopingasa womwewo powonjezera .form-check-inline..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>

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

<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>
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"/"batanizidwa". 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

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



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