ਚੈਕ ਅਤੇ ਰੇਡੀਓ

ਸਾਡੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੁੜ-ਲਿਖਤ ਜਾਂਚਾਂ ਵਾਲੇ ਹਿੱਸੇ ਦੇ ਨਾਲ ਇਕਸਾਰ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਕਰਾਸ-ਡਿਵਾਈਸ ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਬਣਾਓ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਪਹੁੰਚ

ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਨੂੰ ਦੀ ਮਦਦ ਨਾਲ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ .form-check, ਦੋਵਾਂ ਇਨਪੁਟ ਕਿਸਮਾਂ ਲਈ ਕਲਾਸਾਂ ਦੀ ਇੱਕ ਲੜੀ ਜੋ ਉਹਨਾਂ ਦੇ HTML ਤੱਤਾਂ ਦੇ ਲੇਆਉਟ ਅਤੇ ਵਿਵਹਾਰ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ, ਜੋ ਕਿ ਵਧੇਰੇ ਅਨੁਕੂਲਤਾ ਅਤੇ ਕਰਾਸ ਬ੍ਰਾਊਜ਼ਰ ਇਕਸਾਰਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਚੈਕਬਾਕਸ ਇੱਕ ਸੂਚੀ ਵਿੱਚ ਇੱਕ ਜਾਂ ਕਈ ਵਿਕਲਪਾਂ ਨੂੰ ਚੁਣਨ ਲਈ ਹੁੰਦੇ ਹਨ, ਜਦੋਂ ਕਿ ਰੇਡੀਓ ਬਹੁਤ ਸਾਰੇ ਵਿੱਚੋਂ ਇੱਕ ਵਿਕਲਪ ਚੁਣਨ ਲਈ ਹੁੰਦੇ ਹਨ।

ਢਾਂਚਾਗਤ ਤੌਰ 'ਤੇ, ਸਾਡੇ <input>s ਅਤੇ <label>s ਭੈਣ-ਭਰਾ ਤੱਤ ਹਨ , ਇੱਕ <input>ਦੇ ਅੰਦਰ ਇੱਕ ਦੇ ਉਲਟ <label>। ਇਹ ਥੋੜਾ ਹੋਰ ਵਰਬੋਸ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਨੂੰ ਅਤੇ ਨਾਲ ਸੰਬੰਧਿਤ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨਾ ਚਾਹੀਦਾ idਹੈ । ਅਸੀਂ ਆਪਣੇ ਸਾਰੇ ਰਾਜਾਂ ਲਈ ਸਿਬਲਿੰਗ ਸਿਲੈਕਟਰ ( ) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜਿਵੇਂ ਜਾਂ । ਜਦੋਂ ਕਲਾਸ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ 'ਸਥਿਤੀ' ਦੇ ਆਧਾਰ 'ਤੇ ਹਰੇਕ ਆਈਟਮ ਲਈ ਟੈਕਸਟ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸਟਾਈਲ ਕਰ ਸਕਦੇ ਹਾਂ ।for<input><label>~<input>:checked:disabled.form-check-label<input>

ਸਾਡੇ ਚੈਕ ਕਸਟਮ ਬੂਟਸਟਰੈਪ ਆਈਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਜਾਂਚ ਕੀਤੀ ਜਾਂ ਅਨਿਸ਼ਚਿਤ ਅਵਸਥਾਵਾਂ ਨੂੰ ਦਰਸਾਇਆ ਜਾ ਸਕੇ।

ਜਾਂਚ ਕਰਦਾ ਹੈ

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਚੈੱਕਬਾਕਸ

ਚੈੱਕਬਾਕਸ 'ਤੇ ਨਿਸ਼ਾਨ ਲਗਾਇਆ

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ਸੂਡੋ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ (ਇਸ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੋਈ ਉਪਲਬਧ 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>

ਇਨ ਲਾਇਨ

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