تەكشۈرۈش ۋە رادىئو

پۈتۈنلەي قايتا يېزىلغان تەكشۈرۈش زاپچاسلىرى بىلەن ئىزچىل تور كۆرگۈچ ۋە ئۈسكۈنىلەر ئارا تەكشۈرۈش رامكىسى ۋە رادىئو قۇرۇڭ.

بۇ بەتتە

يېقىنلىشىش

توركۆرگۈ سۈكۈتتىكى تەكشۈرۈش رامكىسى ۋە رادىئونىڭ ياردىمى بىلەن ئالماشتۇرۇلىدۇ ، .form-checkھەر ئىككى كىرگۈزۈش تىپىدىكى HTML ئېلېمېنتلىرىنىڭ ئورۇنلاشتۇرۇلۇشى ۋە ھەرىكىتىنى ياخشىلايدىغان بىر يۈرۈش دەرسلەر ، تېخىمۇ چوڭ خاسلاشتۇرۇش ۋە توركۆرگۈچنىڭ بىردەكلىكىنى تەمىنلەيدۇ. تەكشۈرۈش رامكىسى تىزىملىكتىكى بىر ياكى بىر قانچە تاللاشنى تاللايدۇ ، رادىئو بولسا نۇرغۇن تاللاشتىن بىرنى تاللايدۇ.

قۇرۇلما جەھەتتىن ، بىزنىڭ s <input>ۋە <label>s قېرىنداش ئېلېمېنتلاردۇر . بۇ سىز بىلەن مۇناسىۋەتلىك بولغان خاسلىق ۋە خاسلىقنى بەلگىلىشىڭىز كېرەك . بىز بارلىق شىتاتلىرىمىز ئۈچۈن ئاكا - ئۇكا تاللىغۇچ () نى ئىشلىتىمىز . سىنىپ بىلەن بىرلەشتۈرگەندە ، ھەر بىر تۈرنىڭ تېكىستىنى «ھالىتى» گە ئاساسەن ئاسانلا ئۇسلۇب قىلالايمىز.<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

تەكشۈرۈشىمىز تەكشۈرۈلگەن ياكى ئېنىقلانمىغان ھالەتلەرنى كۆرسىتىش ئۈچۈن ئىختىيارى Bootstrap سىنبەلگىسىنى ئىشلىتىدۇ.

Checks

كۆڭۈلدىكى تەكشۈرۈش رامكىسى

تەكشۈرۈش رامكىسى

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 ئارقىلىق قولدا تەڭشىگەندە ساختا سىنىپتىن پايدىلىنالايدۇ :indeterminate(ئۇنى بەلگىلەيدىغان 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ۋە مۇناسىۋەتلىك <label>s ئاپتوماتىك ھالدا تېخىمۇ سۇس رەڭ بىلەن ماسلاشتۇرۇلۇپ كىرگۈزۈش ھالىتىنى كۆرسىتىشكە ياردەم بېرىدۇ.

چەكلەنگەن تەكشۈرۈش رامكىسى چەكلەنگەن

تەكشۈرۈش ساندۇقى چەكلەنگەن

چەكلەنگەن تەكشۈرۈش رامكىسى چەكلەنگەن

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>

Inline

گۇرۇپپا تەكشۈرۈش رامكىسى ياكى رادىئو ئوخشاش گورىزونتال قۇردىكى .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>

كۆرۈنۈشتە ، بۇ تەكشۈرۈش رامكىسىنى ئالماشتۇرۇش كۇنۇپكىسى كۇنۇپكا قىستۇرمىسى ئالماشتۇرۇش كۇنۇپكىسى بىلەن ئوخشاش . قانداقلا بولمىسۇن ، ئۇلار ياردەمچى تېخنىكىلار ئارقىلىق باشقىچە يەتكۈزۈلىدۇ: تەكشۈرۈش رامكىسى ئالماشتۇرغۇچ ئېكران ئوقۇرمەنلىرى تەرىپىدىن «تەكشۈرۈلگەن» / «تەكشۈرۈلمىگەن» دەپ ئېلان قىلىنىدۇ (گەرچە ئۇلارنىڭ تاشقى كۆرۈنۈشىگە قارىماي ، ئۇلار يەنىلا تەكشۈرۈش ساندۇقى) ، ئەمما كۇنۇپكا قىستۇرمىسىنى قوزغىتىش كۇنۇپكىسى بولىدۇ. «كۇنۇپكا» / «كۇنۇپكا بېسىلدى» دەپ ئېلان قىلىندى. بۇ ئىككى خىل ئۇسۇلنىڭ تاللىنىشى سىز قۇرغان توكنىڭ تۈرىگە باغلىق ، تەكشۈرۈش ساندۇقى ياكى ئەمەلىي كۇنۇپكا سۈپىتىدە ئېلان قىلىنغاندا ، بۇ قوزغىتىشنىڭ ئابونتلارغا نىسبەتەن ئەھمىيىتى بار-يوقلۇقىغا باغلىق.

رادىئو ئالماشتۇرۇش كۇنۇپكىسى

تەكشۈرۈلدى Radio چەكلەنگەن Radio

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>

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