Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
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>

номуайян

Қуттиҳои қайдкунӣ метавонанд :indeterminateсинфи псевдоро ҳангоми ба таври дастӣ тавассути JavaScript насб кардан истифода баранд (барои муайян кардани он ягон атрибути дастраси 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ва s-ҳои алоқаманд <label>ба таври худкор бо ранги сабуктар мувофиқ карда мешаванд, то дар нишон додани ҳолати вуруд кӯмак кунанд.

<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ва s-ҳои алоқаманд <label>ба таври худкор бо ранги сабуктар мувофиқ карда мешаванд, то дар нишон додани ҳолати вуруд кӯмак кунанд.

<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синфро барои интиқоли гузариш истифода мебарад. Гузаришҳо инчунин атрибутро дастгирӣ мекунанд disabled.

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" 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" 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" 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" 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>

Дар мувофиқат

Қуттиҳо ё радиоҳоро дар як сатри уфуқӣ бо илова кардани .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>

Сасс

Тағйирёбандаҳо

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