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. CentOS 8 安装

    截止目前为止CentOS的最新版本为CentOS 8版本,接下来就介绍CentOS Linux 8.0.1905的安装过程 1. 安装CentOS 8 成功引导系统会显示如上图的界面: # 界面说明 ...

  2. The Preliminary Contest for ICPC Asia Shenyang 2019 H. Texas hold'em Poker

    题目链接:https://nanti.jisuanke.com/t/41408 题目意思很简单,就是个模拟过程. #include <iostream> #include <cstr ...

  3. C#进阶系列 ---- 《CLR via C#》

      [C#进阶系列]30 学习总结 [C#进阶系列]29 混合线程同步构造 [C#进阶系列]28 基元线程同步构造 [C#进阶系列]27 I/O限制的异步操作 [C#进阶系列]26 计算限制的异步操作 ...

  4. zzulioj - 2558 数字的差值

    首先感谢抱抱熊dalao的题解,提供了一种比较简单的思路.[抱抱熊dalao的题解](https://note.youdao.com/ynoteshare1/index.html?id=52f087d ...

  5. ABP 后台调用接口 获取返回的数据

    原文:https://www.cnblogs.com/i3yuan/p/10703500.html insert 简单测试: public void test8() { string url = &q ...

  6. Spring Data学习中心

    Spring Data 概览 Spring Data的使命是为数据访问提供熟悉且一致的基于Spring的编程模型,同时仍保留底层数据存储的特殊特性. 它使数据访问技术,关系数据库和非关系数据库,map ...

  7. django-debug-toolbar调试请求接口

    第一步: pip install django-debug-toolbar 安装完成,往下继续配置. 第二步: 打开项目,找到settings.py 文件.  找到: INSTALLED_APPS-- ...

  8. 爬虫之selenium模块chrome版本映射表

    驱动及版本对应关系如下: 驱动下载路径见底部: chromedriver版本 支持的Chrome版本v2.43 v69-71v2.42 v68-70v2.41 v67-69v2.40 v66-68v2 ...

  9. 第08组 Beta冲刺(2/5)

    队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 ?按照时间进度的安排进行相应的检查 展示GitHub当日代码/文档签入记 ...

  10. c++ rvo vs std::move

    c++ rvo vs std::move To summarize, RVO is a compiler optimization technique, while std::move is just ...