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

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

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

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

js引入:

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

css引入:

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

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

         $("[name='sw_checkbox']").bootstrapSwitch(
{
size:"small"
}
);

html:

 <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. Mysql最左匹配原则实践(原创)

    mysql最左匹配原则 什么叫最左匹配原则 最左匹配原则的误区 实战 结论: 1 条件查询中条件顺序没有关系 2 在最左匹配原则中,有如下说明: 最左前缀匹配原则,非常重要的原则,mysql会一直向右 ...

  2. Implementation:Sunday 字符串匹配

    int sunday(string str, string pattern) { int str_len = str.length(); int pat_len = pattern.length(); ...

  3. JavaScript document和window属性及方法详解

    [document对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 属性 alinkColor 活动链接的颜色(ALINK)  anchor 一个HTMI锚点 ...

  4. 小程序视图层(xx.xml)和逻辑层(xx.js)

    整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 通过这个简单的例子来 ...

  5. javaSE——字符流

    字符流: 读取数据的单位是字符,即每次可以读取至少一个字符(一个字母.数字.汉字.符号). 和字节流一样,管子搭载的对象不同,则字符流就不同. 类 FileReader: 用于读取文件的便捷类. 继承 ...

  6. Git『Everything up-to-date』问题解决

    今天提交代码的时候遇到了一个小问题,这里解决了记下小记. 提交代码遇到『Everything up-to-date』 上网查了下,发现中文大多答非所问,少数能解决的并没有阐述原理,所以我写这篇文章记录 ...

  7. 微信小程序接口开发中解决https外网调试问题

    准备工作 1.有一台阿里云的Linux CentOS6 服务器,安装支持ssl模块的Nginx 2.有自己的域名,把域名解析到指向该服务器IP,本例中将wx.wangjiang.net 解析到服务器I ...

  8. 解决国外模板h1、h2、h3...不显示中文文章标题的问题

    如果你经常用国外好看的网页模版时候,会遇到不显示中文文章标题的情况,显示英文标题却正常.遇到这个情况很多人认为应该修改CSS的font-family的字体,其实这是错误的,与CSS无关. 出现这种情况 ...

  9. Linux sudo详解

    sudo:控制用户对系统命令的使用权限,root允许的操作.通过sudo可以提高普通用户的操作权限,不过这个权限是需要进行配置才可使用. 常用的命令展示 配置sudo的2种方式 1. visodu 编 ...

  10. 铁乐学python_day13_迭代器生成器

    一.[可迭代对象Iterable] 粗略判断的话,我们可以说能被for循环进行遍历的对象就是可迭代对象,如str,list,tuple,dict(key),set,range. (open file ...