简介

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

更多

前端插件之Bootstrap Switch 选择框开关控制的更多相关文章

  1. 前端基础(十):Bootstrap Switch 选择框开关控制

    简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...

  2. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

  3. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:选择框(Select)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 左右选择框 js插件

    随着项目的进展,测试工程师在更多的浏览器中兼容性测试中,发现有些浏览器不支持option的触发事件,这就造成了先前一篇博文bootstrap 左右框多项选择示例 中左右选择框的失效,于是我就由原先的s ...

  6. 前端插件之Select2使用

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...

  7. 前端插件之Datatables使用--上篇

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,前边两篇分别介绍了Duallistbox插件和Select2插件的使用,这一篇开始Databases的征服之旅 D ...

  8. 前端插件之Datatables使用--下篇

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了Datatables插件的基本使用,这一篇文章作为上一篇的延续,会介绍Databases的一些高级 ...

  9. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

随机推荐

  1. Java 中 利用正则表达式 获取 网页图片

    import java.io.File;import java.io.FileOutputStream;import java.io.InputStream;import java.net.URL;i ...

  2. 集合详解(python)

    集合概念 集合是一个数学概念:由一个或多个确定的元素所构成的整体叫做集合. 集合中的元素三个特征: 确定性(元素必须可hash) 互异性(去重)--将一个列表变为集合,就自动去重了 无序性(集合中的元 ...

  3. 使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能

    * mescroll请参考官方文档 1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行) 代码如下: var mescroll = new MeS ...

  4. SpringBoot集成redis的key,value序列化的相关问题

    使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...

  5. 设计模式 --> (3)策略模式

    策略模式 策略模式是指定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.本模式使得算法可独立于使用它的客户而变化.也就是说这些算法所完成的功能一样,对外的接口一样,只是各自实现上存在差异. ...

  6. present(模态)实现出push的效果

    在present加上这个转场动画,取消掉原来的转场动画  CATransition *animation = [CATransitionanimation];     animation.durati ...

  7. 原生js封装添加class,删除class

    一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ...

  8. Sublime Text3下使用Python,REPL的安装与快捷键设置方法

    前提条件:连接外网   1.安装管理插件(CTRL+SHIFT+P),找到Package Control:install package一项,回车后继续选择SublimeREPL插件,进行安装:   ...

  9. oracle创建表空间、创建用户并赋予权限

    分开执行如下sql语句 --创建临时表空间 CREATE SMALLFILE TEMPORARY TABLESPACE "TEMP11" TEMPFILE 'E:\app\MD\o ...

  10. 【Swift】iOS裁剪或者压缩后出现的白边问题

    只需要将所有的CGFloat转化为NSInteger即可 func imageScaleSize(newSize: CGSize) -> UIImage{ let width = NSInteg ...