有时候,为了美化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. Android开发之旅5:应用程序基础及组件

    引言 上篇Android开发之旅:应用程序基础及组件介绍了应用程序的基础知识及Android的四个组件,本篇将介绍如何激活组关闭组件等.本文的主题如下: 1.激活组件:意图(Intents) 1.1. ...

  2. xamarin.android 实现 Activity 底部弹出对话框菜单

    Resources/drawable 下新增如下文件: push_bottom_in.xml <?xml version="1.0" encoding="utf-8 ...

  3. 移动web模拟客户端实现多方框输入密码效果

    不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码. 最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,an ...

  4. spring作用、spring注解、管理对象的作用域与生命周期、自动装配、Spring的框架包有哪些作用是什么

    Spring 1. 作用 创建和管理对象,使得开发过程中,可以不必使用new关键字创建对象,而是直接获取对象!并且,还可以通过一些配置,使得某些获取到的对象,其中某些属性已经是被赋值的! 2. Spr ...

  5. oracel存储过程编写 以及plsql存储过程的debug

    1.语法: create or replace procedure messagebackup_createTable       //此处存储过程名称不能超过30个字符 as  tableName ...

  6. 获取本地IP地址的vc代码

    作者:朱金灿 来源:http://blog.csdn.net/clever101 获取本地IP地址有两种做法.一种是使用gethostname函数,代码如下: bool CSocketComm::Ge ...

  7. asp.net web api 2 host in a windows service推荐阅读

    最简单的例子(官方)在控制台app里面运行: http://www.asp.net/web-api/overview/hosting-aspnet-web-api/use-owin-to-self-h ...

  8. 灰度图的直方图均衡化(Histogram Equalization)原理与 Python 实现

    原理 直方图均衡化是一种通过使用图像直方图,调整对比度的图像处理方法:通过对图像的强度(intensity)进行某种非线性变换,使得变换后的图像直方图为近似均匀分布,从而,达到提高图像对比度和增强图片 ...

  9. PHP匹配当前传入是何种类型

    本文出至:新太潮流网络博客 /** * [is_string_regular_type 正则自动验证传入数据] * @E-mial wuliqiang_aa@163.com * @TIME 2017- ...

  10. 在ubuntu中用apt-get安装LEMP栈(linux+nginx+mysql+php)

    在ubuntu上安装lamp大家应该都很熟悉了,但对于现在很流行的lemp栈怎么样用apt-get安装,这样介绍的文章的不多.下面我用Ubuntu 12.04 LTS为例来介绍下如何用apt-get安 ...