前端插件之Bootstrap Switch 选择框开关控制
简介
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=""
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录