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