适用于Twitter Bootstrap框架的纯CSS样式的复选框/单选框按钮的插件。

GitHub:https://github.com/bantikyan/icheck-bootstrap

如果你在自定义HTML复选框/单选框按钮时遇到问题,选择icheck-bootstrap是一个明智的选择,它可以加快你对复选框/单选框样式的设置和选择。

开始使用

下面几个选项可以让你快速使用到icheck-bootstap:

HTML语法

checkbox例子:
<div class="icheck-primary">
<input type="checkbox" id="someCheckboxId" />
<label for="someCheckboxId">Click to check</label>
</div>
radio按钮例子:
<div class="icheck-primary">
<input type="radio" id="someRadioId1" name="someGroupName" />
<label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
<input type="radio" id="someRadioId2" name="someGroupName" />
<label for="someRadioId2">Option 2</label>
</div>
行排列样式

要内嵌复选框/单选框按钮,需要使用.icheck-inline样式

<div class="icheck-primary icheck-inline">
<input type="checkbox" id="chb1" />
<label for="chb1">Label 1</label>
</div>
<div class="icheck-primary icheck-inline">
<input type="checkbox" id="chb2" />
<label for="chb2">Label 2</label>
</div>
禁用(disabled)

在复选框/单选框按钮上使用禁用属性可以禁用样式

无标签样式

要使的组件没有文字标签,但是您仍然必须具有带空白文本的标签组件。

<div class="icheck-primary">
<input type="checkbox" id="someCheckboxId" />
<label for="someCheckboxId"></label>
</div>

配色方案

可查看后面图片的例子

Twitter Bootstrap:如你将要看到示例样式的一样,icheck-primary类用于组件的样式,你可以将一下类用于Bootstrap的配色方案:

.icheck-default
.icheck-primary
.icheck-success
.icheck-info
.icheck-warning
.icheck-danger

扁平样式颜色:你也可以从flatuicolors.com中选择你喜欢的非常漂亮的颜色使用。

.icheck-turquoise
.icheck-emerland
.icheck-peterriver
.icheck-amethyst
.icheck-wetasphalt
.icheck-greensea
.icheck-nephritis
.icheck-belizehole
.icheck-wisteria
.icheck-midnightblue
.icheck-sunflower
.icheck-carrot
.icheck-alizarin
.icheck-clouds
.icheck-concrete
.icheck-orange
.icheck-pumpkin
.icheck-pomegranate
.icheck-silver
.icheck-asbestos

许可证

icheck-bootstrap使用的是MIT许可证。可以在个人和商业项目中使用它。

[推荐]icheck-bootstrap(漂亮的ckeckbox/radiobox)的更多相关文章

  1. 推荐5个漂亮的网站html源码

    给大家推荐几个很漂亮的html网站源码模板,下面就简单列几个,更多的自己可以去看 1.大屏背景摄影工作室作品案例网页模板 [效果预览及下载] 2.粉色响应式IT科技服务器机房企业模板 [效果预览及下载 ...

  2. 推荐12个漂亮的 CSS3 按钮实现方案

    在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按 ...

  3. 推荐的bootstrap之 formgroup表单布局样式

    一直没能找到比较好的Form Group样式,直到找到如下样式 转自 https://www.cnblogs.com/jokerjason/p/5721349.html <form class= ...

  4. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  5. 20个漂亮 CSS3 按钮效果及优秀的制作教程

    在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...

  6. 关于bootstrap框架美化的实例教程(python)

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...

  7. 前端开发利器: Bootstrap + AngularJS

    http://blog.csdn.net/conquer0715/article/details/51181391 概述 在HTML5盛行的互联网时代,涌现诸多的前端html/css/js框架,基于其 ...

  8. Web前端开发人员和设计师必读文章推荐【系列十】

    <Web前端开发人员和设计师必读文章推荐系列十>给大家带来最近两个月发布在<梦想天空>的优秀文章,特别推荐给 Web 开发人员和设计师阅读.梦天空博客关注 前端开发 技术,展示 ...

  9. 推荐25个帮助你提高技能的 CSS3 实战教程

    使用 CSS,你能够以极高的效率和易用性创造出美丽的设计.而目前流行的 CSS3 技术更加强大,能够创造更多丰富的效果和功能,而不需要任何外部插件.今天,我为大家收集了25个很有用的 CSS 教程,技 ...

随机推荐

  1. MyBatis-使用XML或注解的简单实例

    一.导入jar包 <dependency> <groupId>junit</groupId> <artifactId>junit</artifac ...

  2. poj 2442 Sequence (Priority Queue)

    2442 -- Sequence 真郁闷,明明方法是对的,为什么我的代码老是那么的慢._(:з」∠)_ 这题要想考虑两列的情况,然后逐列拓展. 代码如下: #include <cstdio> ...

  3. LRJ

    //3-1 #define _CRT_SECURE_NO_WARNINGS #include <cstdio> int main() { int T; ]; scanf("%d& ...

  4. 安装ssh-batch工具

    关于sshbatch sshbatch是用perl写了非常方便操作管理集群的一个工具,项目的源码在GitHub托管. 关于sshbatch以及其详细的使用方法,春哥在GitHub上介绍的非常详细了,详 ...

  5. Navicat for MySQL 使用SSH方式链接远程数据库(二)

    这里我们使用SSH连接远程mysql数据库 2 SSH这种方式,可以使我们连接到远程服务器,但是现在并不能访问数据库,因为我们还没有连接到数据库 3 既然已经连接到服务器了,我们就该连接服务器上的数据 ...

  6. Python--day31--黏包(不熟...)

  7. 【BZOJ 1004】 [HNOI2008]Cards

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1004 [题意] 给你sr+sb+sg张牌,(令n=sr+sb+sg),让你把这n张牌染 ...

  8. 《代码整洁之道 中文版》高清 PDF 电子书下载

    代码整洁之道.PDF 下载 代码整洁之道.PDF 中文版 高清 PDF  电子书下载 代码整洁之道下载  点我下载 作者简介  · · · · · · Robert C. Martin,Object ...

  9. P1020 从大到小排序

    题目描述 给你n个整数,请你按照从大到小的顺序输出它们. 输入格式 输入的第一行包含一个整数 \(n(1 \le n \le 10^3)\) ,用于表示元素的个数. 输入的第二行包含 \(n\) 个整 ...

  10. dotnet 使用 MessagePack 序列化对象

    和很多序列化库一样,可以通过 MessagePack 序列化和反序列化,和 json 相比这个库提供了二进制的序列化,序列化之后的内容长度比 json 小很多 这个库能序列的内容不多,大多数时候建议使 ...