有时候,为了美化checkbox后者radio的时候,让用户体验起来更好,jquery里有icheck。

bootstrap里有bootstrap-switch,就简单介绍下bootstrap-switch。

官网地址:http://www.bootcss.com/p/bootstrap-switch/

GitHub:https://github.com/Bttstrp/bootstrap-switch

js引入:

  1. <script src="/static/js/jquery-2.1.1.min.js"></script>
  2. <script src="/static/js/bootstrap-switch.min.js"></script>
  3. <script src="/static/js/bootstrap.min.js"></script>

css引入:

  1. <link href="/static/css/bootstrap-switch.css" rel="stylesheet">
  2. <link href="/static/css/bootstrap.min.css" rel="stylesheet">

js:可以自定义button大小和颜色!

  1. $("[name='sw_checkbox']").bootstrapSwitch(
  2. {
  3. size:"small"
  4. }
  5. );

html:

  1. <label ><input type="checkbox" name="sw_checkbox"> &nbsp&nbsp <i class="fa fa-search" aria-hidden="true"></i> xxxx:</label>

效果:

bootstrap 多选款样式:bootstrap-switch的更多相关文章

  1. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  2. Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放

    UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图 ...

  3. Bootstrap表单布局样式

    1.并排和下拉选项 <form class="form-horizontal" role="form"> <fieldset> < ...

  4. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  5. 10款免费Bootstrap后台模板演示及下载

    自从有了类似Bootstrap这样强大的前端框架之后,无论我们是做静态页面,还是做网站主题,着实方便很多.即便有很多类似的其他国产.海外的前端框架比较,Bootstrap用户量以及功能文档还是比较大的 ...

  6. Bootstrap列表与代码样式(附源码)--Bootstrap

    给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...

  7. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  8. 【推荐】免费,19 款仿 Bootstrap 后台管理主题下载

    声明: 1. 本篇文章提到的仿 Bootstrap 风格的主题,是基于 jQuery 的 ASP.NET MVC 控件库的主题. 2. FineUIMvc(基础版)完全免费,可以用于商业项目. 目录 ...

  9. 19 款仿 Bootstrap 后台管理主题免费下载

    声明: 1. 本篇文章提到的仿 Bootstrap 风格的主题,是基于 jQuery 的 ASP.NET MVC 控件库的主题. 2. FineUIMvc(基础版)完全免费,可以用于商业项目. 目录 ...

随机推荐

  1. JVM学习网址(收集总结)

    1.文章分类 - JVM调优总结   JVM综合调优汇总 星火燎原智勇 2018-08-16 11:11 阅读:8 评论:0 JVM调优04-概括总结 星火燎原智勇 2017-01-08 23:28 ...

  2. python中新式类和经典类

    python中的类分为新式类和经典类,具体有什么区别呢?简单的说, 1.新式类都从object继承,经典类不需要. Python 2.x中默认都是经典类,只有显式继承了object才是新式类 Pyth ...

  3. Html5不可见标签,及标签属性(元素对象属性) a href target name id 相对路径

    标签属性分类(元素对象属性) 不可见标签与可见标签: <head></head>        属于不可见标签, 里面的内容一般用于css还有全局的一些变量,声明等. 而且如果 ...

  4. aix系统下的websphere的静默安装

     一:环境 aix5.3,websphere6(ND版本,WebSphereV6.1_for_AIX_64-bit_Support.tar),注意:aix和websphere的版本问题 二:安装 ...

  5. svn 同步资源库时忽略某些文件类型和文件夹

    项目开发中,开发人员经常用SVN来管理代码,在和服务器同步时,每次都看到一堆.class,.log,target等文件,这样很不舒服. 解决方法: 打开:window-->preferences ...

  6. Pig store用法举例

    store:将数据存储到HDFS等文件系统里   将数据保存到/data目录 store data into '/data'; 以逗号为分隔符 store data into '/data' usin ...

  7. asar 如何解密加密?electron 的 asar 的具体用法

    来源:https://newsn.net/say/electron-asar.html 在electron中,asar是个特殊的代码格式.asar包里面包含了程序猿编写的代码逻辑.默认情况下,这些代码 ...

  8. 获取WebService的请求信息

    一个已经写好的项目中有多个WebService,由于之前没有记录请求信息的,有时候需要查错等需要找到当次的请求信息,所以需要加入记录请求信息的功能. 首先想到的是在每一个带有WebMethod特性的方 ...

  9. show tables from information_schema/performance_schema/sys;

    root@localhost:3306.sock [performance_schema]>select version();+------------+| version()  |+----- ...

  10. lambda 表达式的由来

    相关技术点:函数指针.C#委托.匿名方法.lambda表达式 谈到lambda表达式,首先从委托讲起, 委托是持有一个或者多个方法的对象,这个特性有点像C中的函数指针,可以指向不同的方法,下面的例子是 ...