Чекхо ва радиоприёмникхо

Бо ҷузъҳои чекҳои пурра аз нав навишташудаи мо қуттиҳои тасдиқкуниро дар байни браузерҳо ва дастгоҳҳо ва радиоҳо созед.

Дар ин саҳифа

Муносибат

Қуттиҳои пешфарзии браузер ва радиоҳо бо ёрии .form-check, як қатор синфҳо барои ҳарду намуди вуруд иваз карда мешаванд, ки тарҳ ва рафтори унсурҳои HTML-и онҳоро беҳтар мекунанд, ки мутобиқсозии бештар ва мутобиқати байни браузерро таъмин мекунанд. Қуттиҳои қайдҳо барои интихоби як ё якчанд вариант дар рӯйхат мебошанд, дар ҳоле ки радиоҳо барои интихоби як вариант аз бисёриҳо мебошанд.

Аз ҷиҳати сохтор, <input>s ва <label>s-и мо бар хилофи як <input>дар дохили як унсури бародаранд <label>. Ин каме мухтасартар аст, зеро шумо бояд атрибутҳо idва сифатҳоро барои иртибот бо ва . Мо интихобкунандаи бародар ( ) -ро барои ҳама иёлатҳои худ истифода мебарем , ба монанди ё . Вақте ки бо синф якҷоя карда мешавад, мо метавонем матнро барои ҳар як ашё дар асоси ҳолати ' ба осонӣ услуб кунем.for<input><label>~<input>:checked:disabled.form-check-label<input>

Чекҳои мо нишонаҳои фармоишии Bootstrap-ро барои нишон додани ҳолати тафтишшуда ё номуайян истифода мебаранд.

чекхо

Қуттии пешфарз

Қуттии қайд карда шуд

html

<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 мавҷуд нест).

Қуттии санҷиши номуайян

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

Қуттии санҷиши номуайян ғайрифаъол

Қуттии ғайрифаъол

Хомӯш кардани қуттии қайдшуда

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<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>

Радиохо

Радиои пешфарз

Радиои пешфарз санҷидашуда

html

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

Маъюб

Радиои ғайрифаъол

Радиои санҷидашуда хомӯш карда шудааст

html

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

Вуруди қуттии гузариши пешфарз

Вуруди қуттии гузариш санҷида шуд

Вуруди қуттии гузариш ғайрифаъол

Вуруди қуттии санҷиши гузариш ғайрифаъол

html

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

Қуттии пешфарз

Қуттии ғайрифаъол

html

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

Радиои пешфарз

Радиои дуюми пешфарз

Радиои ғайрифаъол

html

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

3 (маъюб)

html

<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 (маъюб)

html

<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-reverseсинфи тағирдиҳанда гузоред.

Қуттии қайдро баргардонед

Қуттии санҷиши баръакс ғайрифаъол

Вуруди қуттии гузаришро баръакс

html

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

Бе нишонаҳо

Барои қуттиҳои қайдкунӣ .form-checkва радиоҳое, ки матни тамғакоғаз надоранд, парпечкуниро тарк кунед. Дар хотир доред, ки то ҳол ягон шакли номи дастрасро барои технологияҳои ёрирасон пешниҳод кунед (масалан, бо истифода аз aria-label). Барои тафсилот ба бахши дастрасии шаклҳо нигаред.

html

<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>элементҳо , қуттиҳои ба тугма монанд ва тугмаҳои радио эҷод кунед . Агар лозим бошад , ин тугмаҳои ивазкунанда метавонанд минбаъд дар як гурӯҳи тугмаҳо гурӯҳбандӣ карда шаванд .

Тугмаҳои ивазкунандаи қуттии қайд

Гузариш ягона

html

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

Санҷида шуд

html

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

Маъюб

html

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

Ба таври визуалӣ, ин тугмаҳои ивазкунандаи қуттии қайд ба тугмаҳои ивазкунандаи плагини тугмаҳо шабеҳанд . Бо вуҷуди ин, онҳо тавассути технологияҳои ёрирасон ба таври гуногун интиқол дода мешаванд: ивазкунии қуттиҳои қайдро хонандагони экран ҳамчун "санҷидашуда"/"санҷида нашудаанд" эълон мекунанд (зеро, сарфи назар аз намуди онҳо, онҳо ҳоло ҳам қуттиҳои қайд мебошанд), дар ҳоле ки тугмаҳои ивазкунандаи плагини тугмаҳо ҳамчун "тугма"/"тугма пахш шуд" эълон карда мешавад. Интихоби байни ин ду равиш аз навъи гузарише, ки шумо эҷод мекунед, вобаста хоҳад буд ва оё ивазкунанда ҳангоми эълон ҳамчун қуттии қайд ё тугмаи воқеӣ барои корбарон маъно хоҳад дошт ё на.

Тугмаҳои ивазкунандаи радио

Санҷида шуд Радио Маъюб Радио

html

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

Гузариш ягона
Санҷида шуд
Радиои муваффақият санҷида шуд Радиои хатарнок

html

<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 10 3 3 6-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;