முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

காசோலைகள் மற்றும் ரேடியோக்கள்

எங்களின் முழுவதுமாக மீண்டும் எழுதப்பட்ட காசோலைகள் கூறுகளுடன் நிலையான குறுக்கு உலாவி மற்றும் குறுக்கு சாதன தேர்வுப்பெட்டிகள் மற்றும் ரேடியோக்களை உருவாக்கவும்.

இந்தப் பக்கத்தில்

அணுகுமுறை

.form-checkஉலாவியின் இயல்புநிலை தேர்வுப்பெட்டிகள் மற்றும் ரேடியோக்கள் , HTML உறுப்புகளின் தளவமைப்பு மற்றும் நடத்தையை மேம்படுத்தும், அதிக தனிப்பயனாக்கம் மற்றும் குறுக்கு உலாவி நிலைத்தன்மையை வழங்கும் இரண்டு உள்ளீட்டு வகைகளுக்கான வகுப்புகளின் வரிசையின் உதவியுடன் மாற்றப்படுகின்றன . தேர்வுப்பெட்டிகள் பட்டியலில் ஒன்று அல்லது பல விருப்பங்களைத் தேர்ந்தெடுக்கும், அதே சமயம் ரேடியோக்கள் பலவற்றிலிருந்து ஒரு விருப்பத்தைத் தேர்ந்தெடுக்கும்.

கட்டமைப்புரீதியாக, நமது <input>கள் மற்றும் <label>கள் உடன்பிறந்த கூறுகள் <input>ஆகும் <label>. நீங்கள் குறிப்பிட வேண்டும் idமற்றும் forபண்புக்கூறுகள் <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>

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

<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மாற்று சுவிட்சை வழங்குவதற்கு வகுப்பைப் பயன்படுத்துகிறது. disabledசுவிட்சுகளும் பண்புக்கூறை ஆதரிக்கின்றன .

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" 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" 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" 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" 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;