有时候,为了美化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. 【学习笔记】--- 老男孩学Python,day9, 文件操作

    有 + 就是有光标,注意光标位置 不同模式打开文件的完全列表:  http://www.runoob.com/python/python-files-io.html 模式 描述 r 以只读方式打开文件 ...

  2. java-单例详解

    java单例模式(Singleton)以及实现 一. 什么是单例模式 因程序需要,有时我们只需要某个类同时保留一个对象,不希望有更多对象,此时,我们则应考虑单例模式的设计. 二. 单例模式的特点 1. ...

  3. 第二十六天- C/S架构 通信流程 socket

    1.C/S架构 C/S架构:Client与Server ,中文意思:客户端与服务器端架构,这种架构也是从用户层面(也可是物理层面)来划分的.这里客户端一般指需先安装再执行的应用程序,对操作系统依赖性较 ...

  4. 洛谷P4360 [CEOI2004]锯木厂选址(dp 斜率优化)

    题意 题目链接 Sol 枚举第二个球放的位置,用前缀和推一波之后发现可以斜率优化 // luogu-judger-enable-o2 #include<bits/stdc++.h> #de ...

  5. HTML5之新增的属性和废除的属性 (声明:内容节选自《HTML 5从入门到精通》)

    新增的属性 1.表单相关的属性 ———————————————————————————————————————————————————————— •autocomplete 属性 autocomple ...

  6. php Closure::bind的用法(转)

    官方文档:Closure 类 原文:php中怎么理解Closure的bind和bindTo bind是bindTo的静态版本,因此只说bind吧.(还不是太了解为什么要弄出两个版本) 官方文档: 复制 ...

  7. 跨域调用报表展现页面的flash打印方法

     环境说明: 项目的应用和润乾的报表应用分别部署在同一机器不同的web服务器上(IP相同,端口不同,项目的端口8080,报表应用的端口是6868). 在项目中的父页面通过iframe调用报表展现页 ...

  8. shell_basic

    1.回顾基础命令 2.脚本 3.变量 4.别名 5.条件判断 6.test判断   一.回顾基础命令 shutdown --关机/重启 exit --退出当前shell rmdir --删除空目录 d ...

  9. d3js path generator vs layouts

    我们知道d3的一般套路就是d3.selectAll('path.mypath').data(yourDataset).enter().append('path').attr('class','mypa ...

  10. sql server单个字段列转行由,隔开

    SELECT STUFF((SELECT ','+字段名 FROM 表名 for xml path('')),1,1,'')