简介
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=""
更多
原文地址:https://www.cnblogs.com/fu-yong/p/8794457.html
时间: 2024-10-08 12:52:41