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. 【Tomcat】Web应用的目录结构

    创建时间:6.14 Web应用的目录结构 .xml文件不用自己写,抄头抄尾就可以 (别人的) (抄头抄尾) *注意:WEB-INF目录是受保护的,外界不能直接访问 如果访问WEB-INF目录下的htm ...

  2. 梳理Linux中断处理子系统

    请根据下面链接进行学习: 软件方面可以参考蜗窝科技关于中断子系统的一系列文章<Linux中断子系统>,一共9篇文章,讲述了Linux中断的方方面面. <综述>是一个导论性质文档 ...

  3. 没有该栏目数据, 可能缓存文件(/data/cache/inc_catalog_base.inc)没有更新, 请检查是否有写入权限

    今天朋友在创建新栏目时出现了一个无法生成的错误,提示没有该栏目数据, 可能缓存文件(/data/cache/inc_catalog_base.inc)没有更新, 请检查是否有写入权限,其实这个相对比较 ...

  4. NOIP 2003 栈

    洛谷 P1044 栈 洛谷传送门 JDOJ 1291: [NOIP2003]栈 T3 JDOJ传送门 题目描述 栈是计算机中经典的数据结构,简单的说,栈就是限制在一端进行插入删除操作的线性表. 栈有两 ...

  5. Python进阶-IV-Wrapper高阶

    一.装饰器回顾: 1.标准的装饰器示例 def trapper(func): def inner(*args, **kwargs): print('插入到被装饰函数前的功能!') res = func ...

  6. Kinect for Windows V2开发教程

    教程 https://blog.csdn.net/openbug/article/details/80921437 Windows版Kinect SDK https://docs.microsoft. ...

  7. 【Matplotlib】使用速记

    [持续更新] pyplot matplotlib.pyplot is a state-based interface to matplotlib. It provides a MATLAB-like ...

  8. LeetCode 348. Design Tic-Tac-Toe

    原题链接在这里:https://leetcode.com/problems/design-tic-tac-toe/ 题目: Design a Tic-tac-toe game that is play ...

  9. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  10. 2.shell编程-函数的高级用法

    2.1.函数的定义和使用 函数基本使用 [root@VM_0_9_centos ~]# test() > {} -bash: syntax error near unexpected token ...