简介

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. 敏感词过滤,js封装class选择器:

    敏感词过滤: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 如何关闭常见浏览器的 HSTS 功能

    在安装配置 SSL 证书时,可以使用一种能使数据传输更加安全的Web安全协议,即在服务器端上开启HSTS (HTTP Strict Transport Security).它告诉浏览器只能通过HTTP ...

  3. Knowledge point

    静态网页的特点:以htm.html.sbtml.xml.js.css等为后缀扩展名. 1)程序在客户浏览器端解析,不需要读取数据库,性能和效率较高: 2)后端没有数据库支持,所以和用户的交互性差,功能 ...

  4. Webpack执行命令参数详解

    一.概述前面的章节我们讲解了webpack的安装.webpack.config.js的 基本配置.webpack执行命名以及require方法的使用,不 知道大家有没有发现,当我们每次修改或者新增一个 ...

  5. [poj3461]Oulipo_KMP

    Oulipo poj-3461 题目大意:给你两个字符串s和p,问s中有多少个等于p的子串. 注释:$1\le strlen(p)\le 10^4\qquad1\le strlen(s)\le 10^ ...

  6. Post Office

    Post Office poj-1160 题目大意:给你在数轴上的n个村庄,建立m个邮局,使得每一个村庄距离它最近的邮局的距离和最小,求距离最小和. 注释:n<=300,m<=min(n, ...

  7. sys用户密码丢失找回密码的步骤和命令

    假设你的sys用户密码丢失,写出找回密码的步骤和命令? 1.确认哪个数据库实例的sys用户密码丢失:(例:数据库实例为orclA) 2.进入数据库实例的目录中找到PWDorclA.ora文件:(例目录 ...

  8. lua 二维数组创建

    local arr= {} for i=1, 4 do arr[i] = {} end 使用时可以直接使用arr[i][j]

  9. Java基础学习笔记五 Java基础语法之面向对象

    面向对象 理解什么是面向过程.面向对象 面向过程与面向对象都是我们编程中,编写程序的一种思维方式.面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程.例如:公司打扫卫生( ...

  10. RabbitMQ封装实战

    先说下背景:上周开始给项目添加曾经没有过的消息中间件.虽然说,一路到头非常容易,直接google,万事不愁~可是生活远不仅是眼前的"苟且".首先是想使用其他项目使用过的一套对mq封 ...