bootstrap 单选/开关控件

来源：互联网发布：淘宝商城二手市场编辑：程序博客网时间：2024/05/01 05:48

<div class="form-group">
<label class="col-sm-2 control-label">Inline checkboxes</label>
<div class="col-sm-10">
<label class="checkbox-inline i-checks">
<input type="checkbox" value="option1"><i></i> a
</label>
<label class="checkbox-inline i-checks">
<input type="checkbox" value="option2"><i></i> b
</label>
<label class="checkbox-inline i-checks">
<input type="checkbox" value="option3"><i></i> c
</label>
</div>

</div>

<div class="line line-dashed b-b line-lg pull-in"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Switch</label>
<div class="col-sm-10">
<label class="i-switch m-t-xs m-r">
<input type="checkbox" checked>
<i></i>
</label>
<label class="i-switch bg-info m-t-xs m-r">
<input type="checkbox" checked>
<i></i>
</label>
<label class="i-switch bg-primary m-t-xs m-r">
<input type="checkbox" checked>
<i></i>
</label>
<label class="i-switch bg-danger m-t-xs m-r">
<input type="checkbox" checked>
<i></i>
</label>
</div>
</div>

<div class="line line-dashed b-b line-lg pull-in"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Radio Switch</label>
<div class="col-sm-10">
<label class="i-switch bg-primary m-t-xs m-r">
<input type="radio" name='switch' checked>
<i></i>
</label>
<label class="i-switch bg-warning m-t-xs m-r">
<input type="radio" name='switch'>
<i></i>
</label>
</div>
</div>

<div class="line line-dashed b-b line-lg pull-in"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Switch size</label>
<div class="col-sm-10">
<label class="i-switch i-switch-md bg-info m-t-xs m-r">
<input type="checkbox" checked>
<i></i>
</label>
<label class="i-switch i-switch-lg bg-dark m-t-xs m-r">
<input type="checkbox" >
<i></i>
</label>
</div>
</div>

0 0