ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

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

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

يېقىنلىشىش

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

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

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

Checks

<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 خاسلىقى يوق).

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