in English

Dubawa da rediyo

Ƙirƙiri daidaitaccen mai binciken giciye da akwatunan rajistan na'ura da radiyo tare da sashin binciken mu gaba ɗaya da aka sake rubutawa.

A wannan shafi

kusanci

Ana maye gurbin tsoffin akwatunan rajistan mai bincike da radiyo tare da taimakon .form-check, jerin azuzuwan duka nau'ikan shigarwar guda biyu waɗanda ke inganta shimfidawa da halayen abubuwan HTML ɗin su, waɗanda ke ba da gyare-gyare mafi girma da ƙetare daidaiton mai bincike. Akwatunan rajista don zaɓar ɗaya ko zaɓuɓɓuka da yawa a cikin jeri, yayin da rediyo ke zaɓar zaɓi ɗaya daga mutane da yawa.

A tsari, <input>s da <label>s dinmu abubuwa ne na 'yan uwan juna sabanin na <input>cikin <label>. Wannan ɗan karin magana ne kamar yadda dole ne ka ƙayyade idda forsifofi don alaƙa <input>da <label>. Muna amfani da zaɓin 'yan'uwa ( ~) don duk <input>jihohin mu, kamar :checkedko :disabled. Lokacin da aka haɗa tare da .form-check-labelajin, za mu iya sauƙaƙe rubutun ga kowane abu dangane da yanayin <input>'yanayin.

Abubuwan cak ɗin mu suna amfani da gumakan Bootstrap na al'ada don nuna alamun da aka bincika ko waɗanda ba a tantance ba.

Dubawa

Tsohuwar akwati

An duba akwatin

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

Mara iyaka

Akwatunan rajista na iya amfani da :indeterminateajin karya lokacin da aka saita ta da hannu ta JavaScript (babu wani sifa na HTML don tantance shi).

Akwatin akwati mara iyaka

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

An kashe

Ƙara disabledsifa kuma ana <label>tsara s masu alaƙa ta atomatik don dacewa da launi mai sauƙi don taimakawa wajen nuna yanayin shigarwar.

An kashe akwati

An kashe wanda aka yiwa rajista

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

Rediyo

Rediyo na asali

Rediyon da aka bincika

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

An kashe

Ƙara disabledsifa kuma ana <label>tsara s masu alaƙa ta atomatik don dacewa da launi mai sauƙi don taimakawa wajen nuna yanayin shigarwar.

An kashe rediyo

An kashe rediyo da aka duba

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

Sauyawa

Maɓalli yana da alamar akwati na al'ada amma yana amfani da .form-switchajin don yin jujjuyawa. Yi la'akari da yin amfani role="switch"da shi don isar da daidaitaccen yanayin sarrafawa zuwa fasahar taimako waɗanda ke tallafawa wannan rawar. A cikin tsofaffin fasahohin taimako, kawai za a sanar da shi azaman akwati na yau da kullun azaman koma baya. Sauyawa kuma suna goyan bayan disabledsifa.

Tsohuwar shigar da akwatin rajistan shiga

An duba shigar da akwatin rajistan shiga

An kashe shigar da akwatin rajistan shiga

An kashe alamar shigar da akwatin rajistan shiga

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

Tsohuwar (tarage)

Ta hanyar tsohuwa, kowane adadin akwatunan rajista da rediyo waɗanda ke da ɗan'uwan nan da nan za a lissafta su a tsaye da sarari da kyau tare da .form-check.

Tsohuwar akwati

An kashe akwati

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

Rediyo na asali

Rediyon tsoho na biyu

An kashe rediyo

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

Layin layi

Akwatunan bincike na rukuni ko radiyo akan layi ɗaya a kwance ta ƙara .form-check-inlinezuwa kowane .form-check.

3 (nakasassu)

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

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

Ba tare da lakabi ba

Kashe nannade akwatunan rajista .form-checkda rediyo waɗanda basu da rubutun lakabi. Ka tuna har yanzu samar da wani nau'i na suna don fasahar taimako (misali, ta amfani da aria-label). Dubi sashin fa'idodin fa'ida don samun cikakkun bayanai.

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

Maɓallin maɓalli

Ƙirƙiri akwatunan rajistan maɓalli da maɓallan rediyo ta amfani .btnda salo maimakon .form-check-labelkan <label>abubuwan. Ana iya ƙara haɗa waɗannan maɓallan jujjuya cikin rukunin maɓalli idan an buƙata.

Maɓallin kunna akwati

Juyawa guda ɗaya

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

An duba

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

An kashe

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

A gani, waɗannan maɓallan jujjuyawar akwatin rajistan suna daidai da maɓallan plugin ɗin maɓalli . Koyaya, ana isar da su daban ta hanyar fasahar taimako: masu karatun allo za su sanar da akwatin rajistan a matsayin "aka duba"/"ba a duba su ba" (tun da, duk da bayyanar su, ainihin har yanzu akwatunan rajista ne), yayin da maɓallin plugin ɗin zai kasance. sanar a matsayin "button"/"maɓallin danna". Zaɓin tsakanin waɗannan hanyoyin guda biyu zai dogara ne akan nau'in jujjuyawar da kuke ƙirƙira, kuma ko kunna ko a'a zai yi ma'ana ga masu amfani lokacin da aka sanar a matsayin akwati ko azaman ainihin maɓalli.

Maɓallan kunna rediyo

An duba Rediyo An kashe Rediyo

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

Fassarar salo

Bambance-bambancen daban-daban na .btn, irin su a cikin salo daban-daban da aka zayyana, ana tallafawa.

Juyawa guda ɗaya
An duba
Rediyon nasara da aka duba Rediyo mai haɗari

<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

Masu canji

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