मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

तपासणी आनी रेडिओ

आमच्या पुरायपणान परतून बरयल्ल्या तपासणी घटका वांगडा सुसंगत क्रॉस-ब्राउझर आनी क्रॉस-डिव्हायस चेकबॉक्स आनी रेडिओ तयार करात.

ह्या पानाचेर

मोख

ब्राउझर मुलभूत चेकबॉक्स आनी रेडिओ , च्या आदारान बदलतात .form-check, दोनूय इनपुट प्रकारांखातीर वर्गांची एक माळ जी तांच्या HTML घटकांची मांडावळ आनी वागणूक सुदारता, जी चड पसंतीचें आनी क्रॉस ब्राउझर सुसंगती पुरवण करता. चेकबॉक्स हे वळेरेंत एक वा जायते पर्याय निवडपाखातीर आसतात, जाल्यार रेडिओ जायत्यांतल्यान एक पर्याय निवडपाखातीर आसतात.

रचणुकेचे नदरेन आमचे <input>s आनी s हे एक भितरल्या <label>घटकाच्या विरुद्ध भावंडाचे घटक आसात . हें मात्शें चड वर्बोस आसा कारण तुमी आनी संबंदीत करपाक गुणधर्म स्पश्ट करपाक जाय . आमी आमच्या सगळ्या राज्यां खातीर भावंड निवडपी ( ) वापरतात , जशें वा . वर्गा वांगडा जोडल्यार , आमी 's स्थितीचेर आदारीत दरेक आयटमा खातीर मजकूर सहजपणान स्टायल करूंक शकतात .<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

आमचीं तपासणीं तपासिल्लीं वा अनिर्धारीत स्थिती दाखोवपाक सानुकूल बूटस्ट्रॅप चिन्नां वापरतात.

तपासणी करता

<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छद्म वर्गाचो वापर करूंक शकतात (तें निर्देशीत करपाखातीर उपलब्ध 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>

इनलायन

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