bootstrap switch简单使用

https://www.cnblogs.com/fu-yong/p/8794457.html

 http://www.bootcss.com/p/bootstrap-switch/

简介

Bootstrap Switch是一款轻量级插件，可以给选择框设置类似于开关的样式

它是依赖于Bootstrap的一款插件

下载

下载地址

在线引用

导入

因为它是依赖于Bootstrap的一款插件，所以，在引入之前要先引入Bootstrap样式

1 2 3 4

<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>

使用

1 2 3 4 5 6

# 定义一个选择框 < 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=""

更多

转载于:https://www.cnblogs.com/beimingbingpo/p/9399443.html