טשעקס און ראַדיאָס
שאַפֿן קאָנסיסטענט קרייַז-בלעטערער און קרייַז-מיטל טשעקקבאָקסעס און ראַדיאָס מיט אונדזער גאָר ריריטאַן טשעקס קאָמפּאָנענט.
צוגאַנג
בלעטערער פעליקייַט טשעקקבאָקסעס און ראַדיאָס זענען ריפּלייסט מיט די הילף פון .form-check, אַ סעריע פון קלאסן פֿאַר ביידע אַרייַנשרייַב טייפּס וואָס ימפּרוווז די אויסלייג און נאַטור פון זייער HTML עלעמענטן, וואָס צושטעלן גרעסערע קוסטאָמיזאַטיאָן און קרייַז בלעטערער קאָנסיסטענסי. טשעקקבאָקסעס זענען פֿאַר סאַלעקטינג איינער אָדער עטלעכע אָפּציעס אין אַ רשימה, בשעת ראַדיאָס זענען פֿאַר סאַלעקטינג איין אָפּציע פון פילע.
סטראַקטשעראַלי, אונדזער <input>s און <label>s זענען סיבלינג עלעמענטן ווי קעגן צו אַ <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="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;