1.首先需要引用https://www.bootcss.com/p/bootstrap-switch/

bootstrap-switch插件库
2.先引用jquery文件,在引用bootstrap.css样式 、bootstrap-switch.css样式  、bootstrap-switch.js样式
3.代码编码单选控件

   <input name="status" data-size="mini" type="checkbox"  checked>

 window.onload=function(){
$('[name="status"]').bootstrapSwitch("size","small");//基本初始化
}

//手动设置按钮状态

$('[name="status"]').bootstrapSwitch('state',false);

//点击按钮切换 switch
$('[name="Btn"]').click(function(){
$('[name="status"]').bootstrapSwitch('toggleState');
});

//点击触发事件,监听按钮状态
$('[name="status"]').on('switchChange.bootstrapSwitch',function(event,state){

//内置对象、内置属性
console.log(event);

//获取状态
console.log(state); 
});

 


属性名称

问题 发现直接在html使用

data-size="mini"或js中使用

设置单选框大小,都是无效的。

后来使用js

 $('[name="status"]').bootstrapSwitch("size","small");
这种方式设置达成效果。
具体原因还未知,先记录遗留一下吧

bootstrap-switch使用,small、mini设置的更多相关文章

  1. 前端插件之Bootstrap Switch 选择框开关控制

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

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

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

  3. bootstrap switch功能

    bootstrap switch是一个按钮开关,点击时获取其状态可通过以下代码: <input id="email_switch_state" type="chec ...

  4. bootstrap switch样式修改与多列等间距布局

    先以一张图开启今天的随笔 今天实习遇到了switch按钮,小姐姐说用插件bootstrap switch来写,我第一次用这个插件,首先在引入方面就遇到了很多坑,先来总结一下bootstrap swit ...

  5. bootstrap的popover在trigger设置为hover时不隐藏popover

    使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了 ...

  6. 使用jQuery获取Bootstrap Switch的值

    $('#switcher').bootstrapSwitch('state'); // true || false $('#switcher').bootstrapSwitch('toggleStat ...

  7. bootstrap Switch 的一个坑点

    在bootstrap的modal点开的时候改变bootstrapSwitch的状态的时候,会出现第一次打开modal,switch没有变化,第二次以后打开modal才会改变,这个问题找了好久没有找到答 ...

  8. bootstrap使用总结(carousel设置大小。item设置大小,img设置大小)

    在bootstrap中使用carousel,先要给.carousel一个大小, 要想使carousel和item和img随着浏览器大小而变,就要设置 .carousel .item { height: ...

  9. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

随机推荐

  1. django_restframework项目之python虚拟环境配置(一)

    虚拟环境的搭建 优点 1.使不同应用开发环境相互独立 2.环境升级不影响其他应用,也不会影响全局的python环境 3.防止出现包管理混乱及包版本冲突 windows 安装 # 建议使用pip3安装到 ...

  2. UNITY Serializer 序列化 横向对比

    UNITY Serializer 序列化 横向对比 关于序列化,无论是.net还是unity自身都提供了一定保障.然而人总是吃着碗里想着锅里,跑去github挖个宝是常有的事.看看各家大佬的本事.最有 ...

  3. ChengDu University Mental Health Test 需求分析文档

    ChengDu University Mental Health Website 需求分析文档 V4.0 编制人:刘雷,黄凯 日期:2019/4/28 版本修订历史记录: 版本 日期 修改内容 作者 ...

  4. linux常见性能分析工具

     vmstat    sar  (来源于sysstat工具包,需要yum  sysstat)iostat  (来源于sysstat工具包,需要yum  sysstat)free  -muptimene ...

  5. 记录OKR在小公司实施的一次经历

    00 前言 前段时间看了本书叫<OKR工作法>,顺便了解了一下OKR的相关知识,感觉这个起源于英特尔公司的东西,正是为那种小而美的团队准备的好东东.如果你还不知道什么是OKR,那我给你个传 ...

  6. 如何将MultipartFile转换成based4

    public String test(MultipartFile file) throws Exception{ BASE64Encoder base64Encoder =new BASE64Enco ...

  7. 使用log4Net输出调试信息

    在上一篇搭建服务器端的项目基础上,使用log4Net进行调试信息输出 http://www.cnblogs.com/fzxiaoyi/p/8439769.html 1.先分析下Photo 自带的服务器 ...

  8. 【转】编写高质量代码改善C#程序的157个建议——建议56:使用继承ISerializable接口更灵活地控制序列化过程

    建议56:使用继承ISerializable接口更灵活地控制序列化过程 接口ISerializable的意义在于,如果特性Serializable,以及与其像配套的OnDeserializedAttr ...

  9. LeetCode 1146. Snapshot Array

    原题链接在这里:https://leetcode.com/problems/snapshot-array/ 题目: Implement a SnapshotArray that supports th ...

  10. 【BZOJ3569】DZY Loves Chinese II

    [BZOJ3569]DZY Loves Chinese II 题面 bzoj 题目大意: 给你一张\(N(1\leq N\leq 10^5)\)个点\(M(1\leq M\leq 5\times 10 ...