bootstrap checkbox_[推荐]icheck-bootstrap(漂亮的ckeckbox/radiobox)

适用于Twitter Bootstrap框架的纯CSS样式的复选框/单选框按钮的插件。
GitHub:https://github.com/bantikyan/icheck-bootstrap
如果你在自定义HTML复选框/单选框按钮时遇到问题,选择icheck-bootstrap是一个明智的选择,它可以加快你对复选框/单选框样式的设置和选择。

开始使用

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

  • 下载最新版本https://github.com//bantikyan/icheck-bootstrap/archive/3.0.1.zip
  • 通过Bower安装:bower install icheck-bootstrap
  • 通过npm安装:npm install icheck-bootstrap
  • 通过nuget安装:Install-Package icheck-bootstrap
  • 使用CDN:jsDelivr

HTML语法

checkbox例子:

<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId"  data-tomark-pass />
    <label for="someCheckboxId">Click to check</label>
</div>

radio按钮例子:

<div class="icheck-primary">
    <input type="radio" id="someRadioId1" name="someGroupName"  data-tomark-pass />
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
    <input type="radio" id="someRadioId2" name="someGroupName"  data-tomark-pass />
    <label for="someRadioId2">Option 2</label>
</div>

行排列样式

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

<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb1"  data-tomark-pass />
    <label for="chb1">Label 1</label>
</div>
<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb2"  data-tomark-pass />
    <label for="chb2">Label 2</label>
</div>

禁用(disabled)

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

无标签样式

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

<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId"  data-tomark-pass />
    <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许可证。可以在个人和商业项目中使用它。

7ff8589dff347f373231bc859dda9353.png
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值