جعبه تشریح (Checkbox) #
هر جعبه تشریح و جعبه رادیویی <input> و <label> به صورت جفت در یک <div> محصور شده است تا کنترل سفارشی ما را ایجاد کند. ساختاراً، این رویکرد همانند .form-check پیشفرض ما است.
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck1">
<label class="form-check-label" for="customCheck1">این جعبه تشریح سفارشی را بررسی کنید</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck2">
<label class="form-check-label" for="customCheck2">این جعبه تشریح سفارشی را بررسی کنید</label>
</div>
جعبه تشریح خطی (Inline Checkbox)#
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="customCheck3">
<label class="form-check-label" for="customCheck3">این جعبه تشریح سفارشی را بررسی کنید</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="customCheck4">
<label class="form-check-label" for="customCheck4">این جعبه تشریح سفارشی را بررسی کنید</label>
</div>
جعبه تشریح غیر فعال (Disabled Checkbox)#
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="customCheck5" checked disabled>
<label class="form-check-label" for="customCheck5">این جعبه تشریح سفارشی را بررسی کنید</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="customCheck6" disabled>
<label class="form-check-label" for="customCheck6">این جعبه تشریح سفارشی را بررسی کنید</label>
</div>
جعبه تشریح رنگی (Colors Checkbox)#
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="customCheckcolor1" checked>
<label class="form-check-label" for="customCheckcolor1">جعبه تشریح پیشفرض</label>
</div>
<div class="form-check form-checkbox-success mb-2">
<input type="checkbox" class="form-check-input" id="customCheckcolor2" checked>
<label class="form-check-label" for="customCheckcolor2">جعبه تشریح موفقیت</label>
</div>
<div class="form-check form-checkbox-info mb-2">
<input type="checkbox" class="form-check-input" id="customCheckcolor3" checked>
<label class="form-check-label" for="customCheckcolor3">جعبه تشریح اطلاعات</label>
</div>
<div class="form-check form-checkbox-secondary mb-2">
<input type="checkbox" class="form-check-input" id="customCheckcolor6" checked>
<label class="form-check-label" for="customCheckcolor6">جعبه تشریح ثانویه</label>
</div>
<div class="form-check form-checkbox-warning mb-2">
<input type="checkbox" class="form-check-input" id="customCheckcolor4" checked>
<label class="form-check-label" for="customCheckcolor4">جعبه تشریح هشدار</label>
</div>
<div class="form-check form-checkbox-danger mb-2">
<input type="checkbox" class="form-check-input" id="customCheckcolor5" checked>
<label class="form-check-label" for="customCheckcolor5">جعبه تشریح خطرناک</label>
</div>
<div class="form-check form-checkbox-dark">
<input type="checkbox" class="form-check-input" id="customCheckcolor7" checked>
<label class="form-check-label" for="customCheckcolor7">جعبه تشریح تاریک</label>
</div>
جعبه رادیویی (Radio)#
هر جعبه رادیویی <input> و <label> به صورت جفت در یک <div> محصور شده است تا کنترل سفارشی ما را ایجاد کند. ساختاراً، این رویکرد همانند .form-check پیشفرض ما است.
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
جعبه رادیویی پیشفرض
</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">
جعبه رادیویی پیشفرض چک شده
</label>
</div>
جعبه رادیویی خطی (Inline Radio)#
<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">این جعبه رادیویی سفارشی را بررسی کنید</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">این جعبه رادیویی سفارشی را بررسی کنید</label>
</div>
جعبه رادیویی غیر فعال (Disabled Radio)#
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="customCheck5" checked disabled>
<label class="form-check-label" for="customCheck5">این جعبه رادیویی سفارشی را بررسی کنید</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="customCheck6" disabled>
<label class="form-check-label" for="customCheck6">این جعبه رادیویی سفارشی را بررسی کنید</label>
</div>
جعبه رادیویی رنگی (Colors Radio)#
<div class="form-check mb-2">
<input type="radio" id="customRadiocolor1" name="customRadiocolor1" class="form-check-input" checked>
<label class="form-check-label" for="customRadiocolor1">رادیوی پیشفرض</label>
</div>
<div class="form-check form-radio-success mb-2">
<input type="radio" id="customRadiocolor2" name="customRadiocolor2" class="form-check-input" checked>
<label class="form-check-label" for="customRadiocolor2">رادیوی موفقیت</label>
</div>
<div class="form-check form-radio-info mb-2">
<input type="radio" id="customRadiocolor3" name="customRadiocolor3" class="form-check-input" checked>
<label class="form-check-label" for="customRadiocolor3">رادیوی اطلاعات</label>
</div>
<div class="form-check form-radio-secondary mb-2">
<input type="radio" id="customRadiocolor6" name="customRadiocolor6" class="form-check-input" checked>
<label class="form-check-label" for="customRadiocolor6">رادیوی ثانویه</label>
</div>
<div class="form-check form-radio-warning mb-2">
<input type="radio" id="customRadiocolor4" name="customRadiocolor4" class="form-check-input" checked>
<label class="form-check-label" for="customRadiocolor4">رادیوی هشدار</label>
</div>
<div class="form-check form-radio-danger mb-2">
<input type="radio" id="customRadiocolor5" name="customRadiocolor5" class="form-check-input" checked>
<label class="form-check-label" for="customRadiocolor5">رادیوی خطرناک</label>
</div>
<div class="form-check form-radio-dark">
<input type="radio" id="customRadiocolor7" name="customRadiocolor7" class="form-check-input" checked>
<label class="form-check-label" for="customRadiocolor7">رادیوی تاریک</label>
</div>
سوییچ (Switch)#
یک سوییچ markup یک جعبه تشریح سفارشی دارد اما از کلاس .form-switch برای نمایش یک سوییچ toggle استفاده میکند. سوییچها همچنین از ویژگی 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">ورودی جعبه تشریح سوییچ پیشفرض</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">ورودی جعبه تشریح سوییچ چک شده</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">ورودی جعبه تشریح سوییچ غیر فعال</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">ورودی جعبه تشریح سوییچ غیر فعال چک شده</label>
</div>