有时候,为了美化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. 矩阵分解---QR正交分解,LU分解

    相关概念: 正交矩阵:若一个方阵其行与列皆为正交的单位向量,则该矩阵为正交矩阵,且该矩阵的转置和其逆相等.两个向量正交的意思是两个向量的内积为 0 正定矩阵:如果对于所有的非零实系数向量x ,都有 x ...

  2. MIPS rop gadgets记录贴&&持续更新

    前言 本帖记录一些常用的,效果好的 rop gadgets. uClibc 从栈中设置$t9 并跳到 $t9 的gadgets , __thread_start 函数第二行 使用 案例 使用tips: ...

  3. dev gridview指定单元格cell获取坐标

    DevExpress.XtraGrid.Views.Grid.ViewInfo.GridViewInfo Info2 = gvQueryResult.GetViewInfo() as DevExpre ...

  4. C#Owin auth20开发 OwinStartup 不会触发的解决办法

    在使用owin auth20设置token时候遇到一个问题.项目中已经存在如下初始化配置类 using Microsoft.Owin; using Owin; [assembly: OwinStart ...

  5. hornor8改user模式为debug模式

    在学习Android软件安全的过程中,经常要用到Android的动态调试.但是呢,一般的Android应用在发布的时候都是发布版的不能直接被调试,为了能使Android应用能够支持调试就需要对Andr ...

  6. python queue和生产者和消费者模型

    queue队列 当必须安全地在多个线程之间交换信息时,队列在线程编程中特别有用. class queue.Queue(maxsize=0) #先入先出 class queue.LifoQueue(ma ...

  7. shell_advanced

    1.輸入輸出,重定向,管道 2.<(cmd):>(cmd) 3.>:<:>>:<<:>>>:<<< 4.文本处理_1 ...

  8. Common administrative commands in Red Hat Enterprise Linux 5, 6, and 7

    https://access.redhat.com/articles/1189123 Common administrative commands in Red Hat Enterprise Linu ...

  9. 汽车学习---汽车知识大全【all】

    汽车驱动/发动机/大灯 侧方位停车和倒车入库技巧 手动挡车型 换档8大技巧 常见的掉头情况注意事项 最全的左转,右转,待转,掉头方法 开车技巧大汇总,尤其适合新手司机 汽车常识扫盲,不做“汽车小白”! ...

  10. 如何访问WEB-INFO目录中的jsp文件

    说明:应用服务器把WEB-INF指为禁访目录,即直接在浏览器里是不能访问的. 如何访问如下: 1.在项目的web.xml文件中去配置servlet <servlet> <servle ...