چک باکس و رادیو تصویر
برای ایجاد چک باکس و رادیو سفارشی با تصویر، از کلاس image-control با custom-control استفاده کنید و تگ <img> را داخل تگ <label> قرار دهید.
با چک باکس
با رادیو
مثال کد
<div class="custom-control custom-checkbox image-control">
<input type="checkbox" class="custom-control-input" id="imageCheck1">
<label class="custom-control-label" for="imageCheck1"><img src="./images/stock/sq/a.jpg" alt=""></label>
</div>
مثال کد
<div class="custom-control custom-radio image-control">
<input type="radio" class="custom-control-input" id="imageRadio1">
<label class="custom-control-label" for="imageRadio1"><img src="./images/stock/sq/d.jpg" alt=""></label>
</div>
چک باکس گروه بندی شده
برای چک باکس گروه بندی شده از کلاس custom-control-pro با custom-control استفاده کنید همچنین اگر می خواهید کنترل را پنهان کنید، از کلاس no-control با آن استفاده کنید.
برای گروه از ul.custom-control-group > li > .custom-control استفاده کنید، اگر می خواهید آن ها را عمودی کنید از .custom-control-vertical در ul استفاده کنید.
حالت پیش فرض
حالت بدون کنترل
با آیکون
فقط آیکون
مثال کد
<ul class="custom-control-group">
<li>
<div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
<input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl1">
<label class="custom-control-label" for="btnCheckControl1">برچسب گزینه</label>
</div>
</li>
<li>
<div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
<input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl5" checked>
<label class="custom-control-label" for="btnCheckControl5">گزینه علامت دار</label>
</div>
</li>
<li>
<div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
<input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl6" disabled>
<label class="custom-control-label" for="btnCheckControl6">گزینه غیرفعال</label>
</div>
</li>
</ul>
رادیو گروه بندی شده
برای رادیو گروه بندی شده از کلاس custom-control-pro با custom-control استفاده کنید همچنین اگر می خواهید کنترل را پنهان کنید، از کلاس no-control با آن استفاده کنید.
برای گروه از ul.custom-control-group > li > .custom-control استفاده کنید، اگر می خواهید آن ها را عمودی کنید از .custom-control-vertical در ul استفاده کنید.
حالت پیش فرض
حالت بدون کنترل
با آیکون
فقط آیکون
انتخاب رنگ
مثال کد
<ul class="custom-control-group">
<li>
<div class="custom-control custom-control-sm custom-radio custom-control-pro">
<input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio1">
<label class="custom-control-label" for="btnRadio1">برچسب گزینه</label>
</div>
</li>
<li>
<div class="custom-control custom-control-sm custom-radio custom-control-pro">
<input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio5" checked>
<label class="custom-control-label" for="btnRadio5">گزینه علامت دار</label>
</div>
</li>
<li>
<div class="custom-control custom-control-sm custom-radio custom-control-pro">
<input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio6" disabled>
<label class="custom-control-label" for="btnRadio6">گزینه غیرفعال</label>
</div>
</li>
</ul>
با محتوای سفارشی
می توانید چک باکس یا رادیو را با هر عنصر سبک دهی شده، درست مانند شکل زیر ایجاد کنید. فقط کلاس .custom-control-pro را به .custom-control اضافه کنید سپس آن عنصر سبک دهی شده را در تگ <label> قرار دهید. مثالی با کارت کاربر برای هدف نمایش نشان داده شده است.
توجه: نباید از هیچ عنصر سطح بلوک در تگ برچسب استفاده کنید.
مثال کد
<ul class="custom-control-group custom-control-vertical w-100">
<li>
<div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
<input type="checkbox" class="custom-control-input" id="user-selection-s1" name="user-selection">
<label class="custom-control-label" for="user-selection-s1">
<span class="user-card">
<span class="user-avatar sq">
<img src="./images/avatar/c-sm.jpg" alt="">
</span>
<span class="user-info">
<span class="lead-text">مینا نجفی</span>
<span class="sub-text">توسعه دهنده ارشد</span>
</span>
</span>
</label>
</div>
</li>
<li>
<div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
<input type="checkbox" class="custom-control-input" id="user-selection-s2" name="user-selection">
<label class="custom-control-label" for="user-selection-s2">
<span class="user-card">
<span class="user-avatar sm bg-pink">
<span>فت</span>
</span>
<span class="user-info">
<span class="lead-text">فرشید ترنیان</span>
<span class="sub-text">توسعه دهنده ارشد</span>
</span>
</span>
</label>
</div>
</li>
</ul>
مثال کد
<ul class="custom-control-group custom-control-vertical custom-control-stacked w-100">
<li>
<div class="custom-control custom-control-sm custom-radio custom-control-pro">
<input type="radio" class="custom-control-input" id="user-choose-s1" name="user-choose">
<label class="custom-control-label" for="user-choose-s1">
<span class="user-card">
<span class="user-avatar sm">
<img src="./images/avatar/c-sm.jpg" alt="">
</span>
<span class="user-name">مینا نجفی</span>
</span>
</label>
</div>
</li>
<li>
<div class="custom-control custom-control-sm custom-radio custom-control-pro">
<input type="radio" class="custom-control-input" id="user-choose-s2" name="user-choose">
<label class="custom-control-label" for="user-choose-s2">
<span class="user-card">
<span class="user-avatar sm bg-pink">
<span>فت</span>
</span>
<span class="user-name">فرشید ترنیان</span>
</span>
</label>
</div>
</li>
</ul>
مثال کد
<ul class="custom-control-group custom-control-vertical w-100">
<li>
<div class="custom-control custom-control-sm custom-radio custom-control-pro">
<input type="radio" class="custom-control-input" name="paymentCheck" id="paymentCheck1">
<label class="custom-control-label" for="paymentCheck1">
<em class="icon icon-lg ni ni-cc-paypal"></em><span>درگاه پرداخت بانک زرین پال</span>
</label>
</div>
</li>
<li>
<div class="custom-control custom-control-sm custom-radio custom-control-pro">
<input type="radio" class="custom-control-input" name="paymentCheck" id="paymentCheck2">
<label class="custom-control-label" for="paymentCheck2">
<em class="icon icon-lg ni ni-cc-mc"></em><span>درگاه پرداخت بانک ملت</span>
</label>
</div>
</li>
</ul>
