Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
in English

Hundi na redio

Unda vivinjari na visanduku vya kuteua vya vifaa tofauti na redio ukitumia sehemu yetu ya ukaguzi iliyoandikwa upya kabisa.

Katika ukurasa huu

Mbinu

Visanduku vya kuteua chaguomsingi vya kivinjari na redio hubadilishwa kwa usaidizi wa .form-check, mfululizo wa madarasa kwa aina zote mbili za ingizo ambazo huboresha mpangilio na tabia ya vipengele vyake vya HTML, ambavyo hutoa ugeuzaji kukufaa zaidi na uthabiti tofauti wa kivinjari. Vikasha tiki ni vya kuchagua chaguo moja au kadhaa katika orodha, ilhali redio ni za kuchagua chaguo moja kutoka nyingi.

Kimuundo, <input>s na <label>s zetu ni vipengele vya undugu kinyume na <input>ndani ya <label>. Hiki ni kitenzi zaidi kidogo kwani lazima ubainishe idna forsifa ili kuhusisha <input>na <label>. Tunatumia kiteuzi ndugu ( ~) kwa <input>majimbo yetu yote, kama :checkedau :disabled. Ikiunganishwa na .form-check-labeldarasa, tunaweza kutengeneza maandishi kwa urahisi kwa kila kipengee kulingana na <input>hali ya.

Cheki zetu hutumia aikoni maalum za Bootstrap ili kuonyesha hali zilizowekwa alama au zisizojulikana.

Hundi

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

Isiyojulikana

Visanduku vya kuteua vinaweza kutumia :indeterminatedarasa bandia zikiwekwa mwenyewe kupitia JavaScript (hakuna sifa ya HTML inayopatikana ya kuibainisha).

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

Imezimwa

Ongeza disabledsifa na <label>s husika huwekwa mtindo kiotomatiki ili kuendana na rangi nyepesi ili kusaidia kuonyesha hali ya ingizo.

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

Redio

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

Imezimwa

Ongeza disabledsifa na <label>s husika huwekwa mtindo kiotomatiki ili kuendana na rangi nyepesi ili kusaidia kuonyesha hali ya ingizo.

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

Swichi

Swichi ina alama ya kisanduku cha kuteua maalum lakini hutumia .form-switchdarasa kutoa swichi ya kugeuza. Fikiria kutumia role="switch"ili kuwasilisha kwa usahihi zaidi asili ya udhibiti kwa teknolojia saidizi zinazotumia jukumu hili. Katika teknolojia za zamani za usaidizi, itatangazwa kama kisanduku cha kuteua cha kawaida kama njia mbadala. Swichi pia zinaauni disabledsifa.

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

Chaguomsingi (imerundikwa)

Kwa chaguo-msingi, idadi yoyote ya visanduku vya kuteua na redio ambazo ni ndugu wa karibu zitawekwa kwa safu wima na kupangwa ipasavyo na .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>

Katika mstari

Vikundi vya visanduku vya kuteua au redio kwenye safu mlalo sawa kwa kuongeza .form-check-inlinekwenye .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>

Bila lebo

Acha kufunga .form-checkvisanduku vya kuteua na redio ambazo hazina maandishi ya lebo. Kumbuka bado kutoa aina fulani ya jina linaloweza kufikiwa kwa teknolojia za usaidizi (kwa mfano, kutumia aria-label). Tazama sehemu ya muhtasari wa ufikivu wa fomu kwa maelezo.

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

Vifungo vya kugeuza

Unda visanduku vya kuteua kama vitufe na vitufe vya redio kwa kutumia .btnmitindo badala ya .form-check-labelkutumia <label>vipengee. Vifungo hivi vya kugeuza vinaweza kuwekwa kwenye kundi katika kikundi cha vitufe ikihitajika.

Vifungo vya kugeuza vya kisanduku cha kuteua

<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>
Kwa mwonekano, vitufe hivi vya kugeuza kisanduku cha kuteua vinafanana na vitufe vya kugeuza vitufe vya programu-jalizi . Hata hivyo, huwasilishwa kwa njia tofauti na teknolojia saidizi: vigeuza kisanduku cha kuteua vitatangazwa na visoma skrini kuwa "vimechaguliwa"/"havijatiwa alama" (kwa kuwa, licha ya mwonekano wao, kimsingi bado ni visanduku vya kuteua), ilhali vitufe vya kugeuza vitufe vitawekwa. ilitangazwa kama "kitufe"/"kitufe kimebonyezwa". Chaguo kati ya mbinu hizi mbili itategemea aina ya kigeuza unachounda, na kama kigeuza kitakuwa na maana kwa watumiaji kinapotangazwa kama kisanduku cha kuteua au kama kitufe halisi.

Vifungo vya kugeuza redio

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

Mitindo iliyoainishwa

Vibadala tofauti vya .btn, kama vile mitindo mbalimbali iliyoainishwa, vinatumika.



<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

Vigezo

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