ತಪಾಸಣೆ ಮತ್ತು ರೇಡಿಯೋಗಳು
ನಮ್ಮ ಸಂಪೂರ್ಣ ಪುನಃ ಬರೆಯಲಾದ ಚೆಕ್‌ಗಳ ಘಟಕದೊಂದಿಗೆ ಸ್ಥಿರವಾದ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಮತ್ತು ಕ್ರಾಸ್-ಡಿವೈಸ್ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳನ್ನು ರಚಿಸಿ.
ಅಪ್ರೋಚ್
ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಸಹಾಯದಿಂದ ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ .form-check, ಎರಡೂ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳಿಗೆ ತರಗತಿಗಳ ಸರಣಿಯು ಅವುಗಳ HTML ಅಂಶಗಳ ವಿನ್ಯಾಸ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ, ಅದು ಹೆಚ್ಚಿನ ಗ್ರಾಹಕೀಕರಣ ಮತ್ತು ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಸ್ಥಿರತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಪಟ್ಟಿಯಲ್ಲಿ ಒಂದು ಅಥವಾ ಹಲವಾರು ಆಯ್ಕೆಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು, ರೇಡಿಯೋಗಳು ಅನೇಕದಿಂದ ಒಂದು ಆಯ್ಕೆಯನ್ನು ಆರಿಸಲು.
ರಚನಾತ್ಮಕವಾಗಿ, ನಮ್ಮ <input>ರು ಮತ್ತು ಗಳು ಒಂದು ಒಳಗಿನ <label>ಅಂಶಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ ಒಡಹುಟ್ಟಿದ ಅಂಶಗಳಾಗಿವೆ . ಇದು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಮೌಖಿಕವಾಗಿದೆ ಏಕೆಂದರೆ ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕು ಮತ್ತು ಸಂಬಂಧಿಸಲು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರಬೇಕು ಮತ್ತು . ನಾವು ನಮ್ಮ ಎಲ್ಲಾ ರಾಜ್ಯಗಳಿಗೆ ಸಿಬ್ಲಿಂಗ್ ಸೆಲೆಕ್ಟರ್ ( ) ಅನ್ನು ಬಳಸುತ್ತೇವೆ, ಹಾಗೆ ಅಥವಾ . ತರಗತಿಯೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ, ರಾಜ್ಯದ ಆಧಾರದ ಮೇಲೆ ನಾವು ಪ್ರತಿ ಐಟಂಗೆ ಪಠ್ಯವನ್ನು ಸುಲಭವಾಗಿ ಶೈಲಿ ಮಾಡಬಹುದು .<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(ಅದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಯಾವುದೇ ಲಭ್ಯವಿರುವ 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="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>ರೇಡಿಯೋಗಳು
<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ಟಾಗಲ್ ಸ್ವಿಚ್ ಅನ್ನು ನಿರೂಪಿಸಲು ವರ್ಗವನ್ನು ಬಳಸುತ್ತದೆ. 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-reverseನಿಮ್ಮ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು, ರೇಡಿಯೋಗಳು ಮತ್ತು ಸ್ವಿಚ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸುವ ವರ್ಗದೊಂದಿಗೆ ಎದುರು ಭಾಗದಲ್ಲಿ ಇರಿಸಿ .
<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). ವಿವರಗಳಿಗಾಗಿ ಫಾರ್ಮ್‌ಗಳ ಅವಲೋಕನ ಪ್ರವೇಶದ ವಿಭಾಗವನ್ನು ನೋಡಿ.
<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 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;