前端插件之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="..."

  1. Mini  迷你

  2. Small 小号

  3. Normal 正常

  4. Large 大号

按钮颜色

data-on-color="..."

data-off-color="..."

  1. primary 深蓝
  2. info   浅蓝
  3. success 绿色
  4. warning 黄色
  5. danger 红色

按钮文字

data-on-text="..."(str类型)

data-off-text="..."

按钮宽度

data-handle-width=".."(int类型)

label宽度

data-label-width="..."(int类型)

只可读

readonly=""

禁用

disabled=""

更多
上一篇:没有对“C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files”的写访问权限 的解决方案


下一篇:Codeforces963C Frequency of String 【字符串】【AC自动机】