چک باکس
کادرهای تم
استفاده از
.new-control,.new-checkboxباlabelبرچسب.new-control-inputبا ورودیtype="checkbox"داخل برچسب و.new-control-indicatorباspanدر داخل برچسب تگ کنید تا کادرهای تم سفارشی ایجاد شود.
پیشفرض
استفاده از .checkbox-* کلاس برای تغییر رنگ های مختلف
<div class="n-chk">
<label class="new-control new-checkbox checkbox-primary">
<input type="checkbox" class="new-control-input" checked>
<span class="new-control-indicator"></span>Primary
</label>
</div>
پیش فرض گرد
استفاده از .new-checkbox-rounded کلاس برای ایجاد کادرهای گرد گرد.
<div class="n-chk">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>Primary
</label>
</div>
خارج از خط
استفاده از .checkbox-outline-* کادرهای ایجاد کلاس برای ایجاد و تغییر رنگهای مختلف خلاصه شده اند.
<div class="n-chk">
<label class="new-control new-checkbox checkbox-outline-default">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>Default
</label>
</div>
طرح کلی گرد
استفاده از .new-checkbox-rounded کلاس برای ایجاد کادرهای گرد گرد.
<div class="n-chk">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-outline-primary">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>Primary
</label>
</div>
رنگ متن پیش فرض
استفاده از .new-checkbox-text کلاس برای ساخت متن به عنوان کادر انتخاب.
<div class="n-chk">
<label class="new-control new-checkbox new-checkbox-text checkbox-primary">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span><span class="new-chk-content">اولیه</span>
</label>
</div>
Rounded Text Color
استفاده از .new-checkbox-rounded کلاس برای ساخت متن به عنوان کادر انتخاب.
<div class="n-chk">
<label class="new-control new-checkbox new-checkbox-rounded new-checkbox-text">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span><span class="new-chk-content">Default</span>
</label>
</div>
رادیو
اینها مضامین رادیویی هستند.
استفاده از
.new-control,.new-radioباlabelبرچسب.new-control-inputبا ورودیtype="radio"داخل برچسب و.new-control-indicatorباspanدر داخل برچسب تگ کنید تا قالب رادیویی سفارشی ایجاد شود.
پیشفرض
استفاده از .radio-* کلاس برای تغییر رنگ های مختلف
<div class="n-chk">
<label class="new-control new-radio radio-primary">
<input type="radio" class="new-control-input" name="custom-radio-1" checked>
<span class="new-control-indicator"></span>Primary
</label>
</div>
کلاسیک
استفاده از .radio-classic-* class to make classic.
<div class="n-chk">
<label class="new-control new-radio radio-classic-primary">
<input type="radio" class="new-control-input" name="custom-radio-2">
<span class="new-control-indicator"></span>Primary
</label>
</div>
میدان
استفاده از .square-radio کلاس برای ساختن مربع.
<div class="n-chk">
<label class="new-control new-radio square-radio radio-primary">
<input type="radio" class="new-control-input" name="custom-radio-3">
<span class="new-control-indicator"></span>Primary
</label>
</div>
رنگ متن پیش فرض
استفاده از .new-radio-text کلاس برای ساخت متن به عنوان کادر انتخاب.
<div class="n-chk">
<label class="new-control new-radio new-radio-text radio-primary">
<input type="radio" class="new-control-input" name="custom-radio-4">
<span class="new-control-indicator"></span><span class="new-radio-content">اولیه</span>
</label>
</div>
رنگ متن توت فرنگی
استفاده از .radio-classic-* کلاس برای ساخت متن به عنوان کادر انتخاب..
<div class="n-chk">
<label class="new-control new-radio new-radio-text radio-classic-primary">
<input type="radio" class="new-control-input" name="custom-radio-5">
<span class="new-control-indicator"></span><span class="new-radio-content">اولیه</span>
</label>
</div>
مربع رنگ متن
استفاده از .square-radio کلاس برای ساخت متن به عنوان کادر انتخاب.
<div class="n-chk">
<label class="new-control new-radio square-radio new-radio-text radio-primary">
<input type="radio" class="new-control-input" name="custom-radio-6">
<span class="new-control-indicator"></span><span class="new-radio-content">اولیه</span>
</label>
</div>
© کپی رایت