سوئیچ
نمونه های پایه
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">پیش فرض سوئیچ</label>
<div class="col-3">
<span class="switch">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-icon">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">تیک نخورده</label>
<div class="col-3">
<span class="switch">
<label>
<input type="checkbox" name=""/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-icon">
<label>
<input type="checkbox" name=""/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">وضعیت غیرفعال</label>
<div class="col-3">
<span class="switch">
<label>
<input type="checkbox" disabled="disabled"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-icon">
<label>
<input type="checkbox" disabled="disabled"/>
<span></span>
</label>
</span>
</div>
</div>
</form>
اندازه های مختلف
اندازه بزرگ:
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">پیش فرض سوئیچ</label>
<div class="col-3">
<span class="switch switch-lg">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-lg switch-icon">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">تیک نخورده</label>
<div class="col-3">
<span class="switch switch-lg">
<label>
<input type="checkbox" name="select" />
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-lg switch-icon">
<label>
<input type="checkbox" name="select" />
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">وضعیت غیرفعال</label>
<div class="col-3">
<span class="switch switch-lg">
<label>
<input type="checkbox" disabled="disabled"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-lg switch-icon">
<label>
<input type="checkbox" disabled="disabled"/>
<span></span>
</label>
</span>
</div>
</div>
</form>
اندازه کوچک:
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">پیش فرض سوئیچ</label>
<div class="col-3">
<span class="switch switch-sm">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-sm switch-icon">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">تیک نخورده</label>
<div class="col-3">
<span class="switch switch-sm">
<label>
<input type="checkbox" name="select" />
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-sm switch-icon">
<label>
<input type="checkbox" name="select" />
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">وضعیت غیرفعال</label>
<div class="col-3">
<span class="switch switch-sm">
<label>
<input type="checkbox" disabled="disabled"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">با آیکون</label>
<div class="col-3">
<span class="switch switch-sm switch-icon">
<label>
<input type="checkbox" disabled="disabled"/>
<span></span>
</label>
</span>
</div>
</div>
</form>
استایل تک رنگ
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">موفقیت</label>
<div class="col-3">
<span class="switch switch-success">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">اصلی</label>
<div class="col-3">
<span class="switch switch-primary">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">اطلاعات</label>
<div class="col-3">
<span class="switch switch-info">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">هشدار</label>
<div class="col-3">
<span class="switch switch-danger">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">برند</label>
<div class="col-3">
<span class="switch switch-brand">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">تیره</label>
<div class="col-3">
<span class="switch switch-dark">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
</form>
استایل دور خط
<form class="form">
<div class="form-group row">
<label class="col-3 col-form-label">موفقیت</label>
<div class="col-3">
<span class="switch switch-outline switch-icon switch-success">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">هشدار</label>
<div class="col-3">
<span class="switch switch-outline switch-icon switch-warning">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">اطلاعات</label>
<div class="col-3">
<span class="switch switch-outline switch-icon switch-info">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">هشدار</label>
<div class="col-3">
<span class="switch switch-outline switch-icon switch-danger">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">اصلی</label>
<div class="col-3">
<span class="switch switch-outline switch-icon switch-primary">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
<label class="col-3 col-form-label">برند</label>
<div class="col-3">
<span class="switch switch-outline switch-icon switch-brand">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">تیره</label>
<div class="col-3">
<span class="switch switch-outline switch-icon switch-dark">
<label>
<input type="checkbox" checked="checked" name="select"/>
<span></span>
</label>
</span>
</div>
</div>
</form>