icheck-bootstrap是一款纯CSS Bootstrap单选框和复选框美化特效插件。通过该插件,你可以对原生的bootstrap单选框和复选框进行美化,应用不同的主题样式,甚至可以制作扁平风格的单选框和复选框。
安装
可以通过npm或bower来安装在icheck-bootstrap。
bower install icheck-bootstrap npm install icheck-bootstrap |
使用方法
在页面中引入bootstrap.min.css和icheck-bootstrap.css文件。
<link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/icheck-bootstrap.css"> |
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> |
内联样式:
<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属性,就可以将它设置为禁用状态。
无label标签:
<div class="icheck-primary"> <input type="checkbox" id="someCheckboxId" /> <label for="someCheckboxId"></label></div> |
颜色主题
Bootstrap主题:
.icheck-default.icheck-primary.icheck-success.icheck-info.icheck-warning.icheck-danger
扁平风格主题:
.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纯CSS Bootstrap单选框和复选框美化特效插件的github地址为:https://github.com/bantikyan/icheck-bootstrap



