简介
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="..."
- primary 深蓝
- info 浅蓝
- success 绿色
- warning 黄色
- danger 红色
按钮文字
data-on-text="..."(str类型)
data-off-text="..."
按钮宽度
data-handle-width=".."(int类型)
label宽度
data-label-width="..."(int类型)
只可读
readonly=""
禁用
disabled=""
更多