චෙක්පත් සහ ගුවන් විදුලි

අපගේ සම්පුර්ණයෙන්ම නැවත ලියන ලද චෙක්පත් සංරචකය සමඟ ස්ථාවර හරස් බ්‍රවුසර සහ හරස් උපාංග පිරික්සුම් කොටු සහ ගුවන්විදුලි සාදන්න.

මෙම පිටුවේ

ප්රවේශය

බ්‍රවුසරයේ පෙරනිමි පිරික්සුම් කොටු සහ රේඩියෝ යන්ත්‍ර ප්‍රතිස්ථාපනය කරනු ලබන්නේ .form-check, වැඩි අභිරුචිකරණයක් සහ හරස් බ්‍රවුසරයේ අනුකූලතාවයක් සපයන, ඒවායේ HTML මූලද්‍රව්‍යවල පිරිසැලසුම සහ හැසිරීම වැඩිදියුණු කරන ආදාන වර්ග දෙක සඳහා පන්ති මාලාවකි. පිරික්සුම් කොටු යනු ලැයිස්තුවක විකල්ප එකක් හෝ කිහිපයක් තෝරාගැනීම සඳහා වන අතර රේඩියෝ යනු බොහෝ දෙනෙකුගෙන් එක් විකල්පයක් තෝරාගැනීම සඳහා වේ.

ව්‍යුහාත්මකව, අපගේ <input>s සහ s යනු a තුළට <label>ප්‍රතිවිරුද්ධව සහෝදර මූලද්‍රව්‍ය වේ . සහ සම්බන්ධ කිරීමට ඔබ නියම කළ යුතු සහ ආරෝපණය කළ යුතු බැවින් මෙය තරමක් වාචික වේ. අපි අපගේ සියලුම ප්‍රාන්ත සඳහා සහෝදර තේරීම් ( ) භාවිතා කරමු , වැනි හෝ . පන්තිය සමඟ සංකලනය වූ විට , අපට ගේ තත්වය මත පදනම්ව එක් එක් අයිතම සඳහා පෙළ පහසුවෙන් හැඩගස්වාගත හැක .<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

පරීක්ෂා කරන ලද හෝ අවිනිශ්චිත තත්වයන් දැක්වීමට අපගේ චෙක්පත් අභිරුචි Bootstrap අයිකන භාවිතා කරයි.

චෙක්පත්

පෙරනිමි පිරික්සුම් කොටුව

සලකුණු කොටුව

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පරිදි ආශ්‍රිත s ස්වයංක්‍රීයව හැඩගස්වනු ලැබේ.<label>

අවිනිශ්චිත පිරික්සුම් පෙට්ටිය අබල කර ඇත

අබල කළ පිරික්සුම් කොටුව

අබල කළ සලකුණු කොටුව

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;