मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
in English

चेक आ रेडियो के काम होला

हमनी के पूरा तरीका से दोबारा लिखल चेक घटक के साथ लगातार क्रॉस-ब्राउजर आ क्रॉस-डिवाइस चेकबॉक्स आ रेडियो बनाईं।

एह पन्ना पर दिहल गइल बा

पहुॅंंच

ब्राउजर डिफ़ॉल्ट चेकबॉक्स आ रेडियो सभ के , के मदद से बदल दिहल जाला .form-check, ई दुनों इनपुट प्रकार खातिर क्लास सभ के एगो सीरीज हवे जे इनहन के एचटीएमएल तत्व सभ के लेआउट आ व्यवहार में सुधार करे ला, जे ढेर कस्टमाइजेशन आ क्रॉस ब्राउजर स्थिरता प्रदान करे ला। चेकबॉक्स कौनों लिस्ट में एक या कई गो विकल्प चुने खातिर होला जबकि रेडियो कई में से एक विकल्प चुने खातिर होला।

संरचनात्मक रूप से, हमनी <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छद्म क्लास के इस्तेमाल कर सके लें जब जावास्क्रिप्ट के माध्यम से मैन्युअल रूप से सेट कइल गइल होखे (एकरा के निर्दिष्ट करे खातिर कौनों एचटीएमएल बिसेसता उपलब्ध नइखे)।

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