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