سبک های چک باکس
برای ایجاد کنترل سفارشی، با استفاده از کلاس های .custom-control، .custom-checkbox هر چک باکس <input> و <label> را با <div> پوشش دهید.
برای اندازه بزرگ یا کوچک .custom-checkbox، از .custom-control-{lg|sm} با کلاس .custom-control استفاده کنید.
مثال کد
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">برچسب گزینه</label>
</div>
<div class="custom-control custom-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">برچسب گزینه</label>
</div>
سبک های رادیو
برای ایجاد کنترل سفارشی، با استفاده از کلاس های .custom-control، .custom-radio هر رادیو <input> و <label> را با <div> پوشش دهید.
برای اندازه بزرگ یا کوچک .custom-radio، از .custom-control-{lg|sm} با کلاس .custom-control استفاده کنید.
مثال کد
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">رادیو</label>
</div>
<div class="custom-control custom-control-lg custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">رادیو</label>
</div>
سبک سوئیچ
برای نشانه گذاری سوئیچ یک .custom-control checkbox از کلاس .custom-switch برای ارائه سوئیچ تغییر وضعیت استفاده کنید.
برای اندازه بزرگ یا کوچک .custom-switch، از .custom-control-{lg|sm} با کلاس .custom-control استفاده کنید.
مثال کد
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">سوئیچ</label>
</div>
<div class="custom-control custom-control-lg custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">سوئیچ</label>
</div>
