扫一扫分享
Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式,它是依赖于Bootstrap的一款插件。将复选框和单选按钮切换为切换开关。
因为它是依赖于Bootstrap的一款插件,所以,在引入之前要先引入Bootstrap样式
<link rel="stylesheet" type="text/css" href="/static/plugin/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/plugin/switch/bootstrap-switch.min.css">
<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/plugin/switch/bootstrap-switch.min.js"></script>
# 定义一个选择框
<input type="checkbox" name="test">
# 给选择框应用样式
<script type="text/javascript">
$("[name='test']").bootstrapSwitch();
</script>
除了默认的样式,还可以通过给input框设置属性的方式给它自定义一些样式
data-size="..."
Mini 迷你
Small 小号
Normal 正常
Large 大号
data-on-color="..."
data-off-color="..."
data-on-text="..."(str类型)
data-off-text="..."
data-handle-width=".."(int类型)
data-label-width="..."(int类型)
readonly=""
disabled=""
手机预览