简介

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. GEETEST极验召集互联网大佬齐聚光谷,共同探讨交互安全问题

    全球互联网技术在飞速发展的同时,网络安全事件也随之频发.除了直接带来经济损失的网络恶意攻击之外,企业在多个方面也遭受着不同程度的网络恶意攻击,包括品牌形象.管理时间.企业竞争力.客户成交量.用户行为等 ...

  2. 在java或 js中的日期时间转换问题

    1.在js中需要求的当前日期的周一和周日 var now = new Date(); // 当前日期时间对象 var date = now.getDate(); // 当前是几号:当前日期在一个月中的 ...

  3. new Image的API

  4. Redis查询,设置超时时间

    1.定义 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...

  5. mysql新手入门随笔2

    17.创建表 CREATE TABLE tbname(columnname1 类型 约束条件, columnname2 类型 约束条件,-); 三大类型:数值型,时间日期型,字符串类型 六大约束条件: ...

  6. 获取dmp文件的schema

    白天的时候,做了一个获取dmp文件的schema实验,特此记录一下. 参考文章:如何获取dmp文件的schema  -- by 我的烟灰缸 http://oradb.cc/2017/07/10/%E5 ...

  7. SQLite学习手册(数据表和视图)

    如何列出SQLite数据库中的所有表 SQLite数据库中的信息存在于一个内置表sqlite_master中,在查询器中可以用 select * from sqlite_master 来查看,如果只要 ...

  8. c# 动态实例化一个泛型类

    动态实例化一个类,比较常见,代码如下 namespace ConsoleApp2 { public class MyClass { } } Type classType = Type.GetType( ...

  9. JavaScript(第十七天)【浏览器检测】

    由于每个浏览器都具有自己独到的扩展,所以在开发阶段来判断浏览器是一个非常重要的步骤.虽然浏览器开发商在公共接口方面投入了很多精力,努力的去支持最常用的公共功能:但在现实中,浏览器之间的差异,以及不同浏 ...

  10. 2017-2018-1 Java演绎法 第二周 作业

    团队任务:讨论Android上的游戏软件 参考现代软件工程 第一章 [概论]练习与讨论: 软件有很多种,也有各种分类办法,本次团队任务是讨论选取Android上的一个游戏软件,考虑到每位组员接触的游戏 ...