Негизги мазмунга өтүү Документтердин навигациясына өтүү
in English

Чек жана радио

Толугу менен кайра жазылган текшерүүлөр компонентибиз менен ырааттуу кайчылаш браузер жана кайчылаш түзмөктөрдү белгилөө кутучаларын жана радиолорду түзүңүз.

мамиле

Серепчинин демейки белгилөө кутучалары жана радиолорунун жардамы менен алмаштырылат .form-check, эки киргизүү түрүнүн тең бир катар класстары алардын HTML элементтеринин жайгашуусун жана жүрүм-турумун жакшыртат, алар көбүрөөк ыңгайлаштыруу жана кайчылаш серепчи ырааттуулугун камсыз кылат. Белгилөө кутучалары тизмедеги бир же бир нече варианттарды тандоо үчүн, ал эми радиолор көптөрдүн арасынан бир параметрди тандоо үчүн.

Структуралык жактан, биздин <input>s жана <label>s бир тууган элементтер болуп <input>саналат <label>. Бул бир аз кененирээк, idанткени forсиз <input>жана <label>. Биз же сыяктуу ~бардык мамлекеттерибиз үчүн бир тууган селекторду ( ) колдонобуз . Класс менен айкалышканда , биз ар бир элементтин абалына жараша текстти оңой эле стилдей алабыз .<input>:checked:disabled.form-check-label<input>

Биздин текшерүүлөр текшерилген же аныкталбаган абалдарды көрсөтүү үчүн ыңгайлаштырылган Bootstrap сүрөтчөлөрүн колдонот.

Текшерүүлөр

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

Белгисиз

Кол менен JavaScript аркылуу коюлганда, белгилөө кутучалары псевдо классты колдоно алат :indeterminate(аны көрсөтүү үчүн 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>

Өчүрүлгөн

Атрибутту кошуңуз disabledжана ага байланыштуу <label>s автоматтык түрдө киргизүүнүн абалын көрсөтүүгө жардам берүү үчүн ачык түскө дал келет.

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

Радиолор

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

Өчүрүлгөн

Атрибутту кошуңуз disabledжана ага байланыштуу <label>s автоматтык түрдө киргизүүнүн абалын көрсөтүүгө жардам берүү үчүн ачык түскө дал келет.

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

Которгучтар

Которуштурууда ыңгайлаштырылган белги кутучасынын белгиси бар, бирок .form-switchкоторгучту көрсөтүү үчүн классты колдонот. role="switch"Бул ролду колдогон жардамчы технологияларга контролдун мүнөзүн так жеткирүү үчүн колдонууну карап көрүңүз . Эски жардамчы технологияларда ал жөн гана резервдик кутуча катары жарыяланат. Которгучтар да 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>

Демейки (жыйылган)

Демейки боюнча, дароо бир тууган болгон каалаган сандагы белги кутучалары жана радиолор вертикалдуу тизилип, менен тиешелүү аралыкта жайгаштырылат .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

Белгилөө кутучаларын же радиолорду бир горизонталдуу сапта .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>

Белгисиз

.form-checkБелги тексти жок белгилөө кутучалары жана радиолор үчүн таңууларды калтырыңыз . Көмөкчү технологиялар үчүн жеткиликтүү аталыштын кандайдыр бир түрүн көрсөтүүнү унутпаңыз (мисалы, колдонуу менен aria-label). Чоо-жайын билүү үчүн формаларга сереп салуу мүмкүнчүлүгү бөлүмүн караңыз.

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

Которуу баскычтары

Элементтерге .btnэмес, стилдерди .form-check-labelколдонуу менен баскыч сыяктуу белги кутучаларын жана радио баскычтарын түзүңүз . <label>Керек болсо , бул которуштуруу баскычтарын баскычтар тобуна топтоого болот .

Белгилөө кутучасын которуштуруу баскычтары

<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>
Көрүнүп тургандай, бул белгилөө кутучасынын которуштуруу баскычтары баскыч плагининин которуштуруу баскычтарына окшош . Бирок, алар жардамчы технологиялар аркылуу ар кандай жеткирилет: кутучанын которуштуруулары экрандагы окурмандар тарабынан "текшерилген"/"белгиленген эмес" деп жарыяланат (анткени, алардын сырткы көрүнүшүнө карабастан, алар түпкүлүгүндө дагы эле белги кутучалары), ал эми баскыч плагиндерин которуу баскычтары "баскыч"/"басылды" деп жарыяланды. Бул эки ыкманын ортосундагы тандоо сиз түзүп жаткан которгучтун түрүнө жараша болот жана которуштуруу колдонуучуларга белгилөө кутучасы же иш жүзүндө баскыч катары жарыяланганда мааниге ээ болобу же жокпу.

Радио которуштуруу баскычтары

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

Белгиленген стилдер

нын ар кандай варианттары .btn, мисалы, ар кандай белгиленген стилдер колдоого алынат.



<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

Өзгөрмөлөр

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