Bootstrap单选按钮和复选框美化特效

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

    插件介绍

    这是一款使用Font Awesome 字体图标来对Bootstrap复选框和单选按钮进行美化的CSS样式特效。

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-27
    阅读:
麦子学院
简要教程

这是一款使用Font Awesome 字体图标来对Bootstrap复选框和单选按钮进行美化的CSS样式特效。

使用方法

在页面中引入bootstrap和Font Awesome字体图标文件,以及美化样式文件build.css文件。

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/build.css">
                
HTML结构

复选框的HTML结构如下:

<div class="checkbox">
    <input id="checkbox1" class="styled" type="checkbox">
    <label for="checkbox1">
        Default
    </label>
</div>
<div class="checkbox checkbox-primary">
    <input id="checkbox2" class="styled" type="checkbox" checked>
    <label for="checkbox2">
        Primary
    </label>
</div>
<div class="checkbox checkbox-success">
    <input id="checkbox3" class="styled" type="checkbox">
    <label for="checkbox3">
        Success
    </label>
</div>
<div class="checkbox checkbox-info">
    <input id="checkbox4" class="styled" type="checkbox">
    <label for="checkbox4">
        Info
    </label>
</div>
<div class="checkbox checkbox-warning">
    <input id="checkbox5" type="checkbox" class="styled" checked>
    <label for="checkbox5">
        Warning
    </label>
</div>
                

单选按钮的基本HTML结构如下:

<div class="radio">
    <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
    <label></label>
</div>
<div class="radio radio-success">
    <input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two">
    <label></label>
</div>                  
                

更多的使用方法请查看DEMO中的演示。

awesome-bootstrap-checkbox特效的github地址为:https://github.com/flatlogic/awesome-bootstrap-checkbox

网友评论