纯CSS Bootstrap单选框和复选框美化特效

当前位置:主页 > CSS3库 > UI界面设计 > 纯CSS Bootstrap单选框和复选框美化特效
纯CSS Bootstrap单选框和复选框美化特效
分享:

    插件介绍

    icheck-bootstrap是一款纯CSS Bootstrap单选框和复选框美化特效插件。通过该插件,你可以对原生的bootstrap单选框和复选框进行美化,应用不同的主题样式,甚至可以制作扁平风格的单选框和复选框。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-24
    阅读:
简要教程

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