Bootstrap复选框和单选按钮美化插件

今天写单选框的时候,根据要求需要美化样式,原来的样式太丑了。为了不重复写轮子,想到寻找插件解决。找到一款Bootstrap复选框和单选按钮美化插件。时间紧张,简单记录。详情待整理。


http://www.htmleaf.com/css3/ui-design/201508262476.html


下载插件。目录如下


打开示例页面index.html. 选择你打算使用的样式。


根据http://www.htmleaf.com/css3/ui-design/201508262476.html使用说明,使用插件。


个人总结:


1、根据index.html引用的外部文件,个人将css,Font-Awesome,fonts三个文件夹全部引入。

2、个人选用的是单选按钮,样式如图


html代码如下

将以下代码拷贝到项目中,因为使用了foreach遍历中发现无法正常使用。

<div class="checkbox checkbox">
                       <input type="radio" name="radio4" id="radio7" value="option1" checked>
                       <label for="radio7">
                           Defeault
                       </label>
                   </div>


分析 之后感觉应该是单选按钮组 id=“radio7”的问题,将radio7修改成遍历值,保持label for与id相同。解决问题,使用代码如下



参考文章:

http://blog.csdn.net/fjnjxr/article/details/65437835


https://github.com/flatlogic/awesome-bootstrap-checkbox


Bootstrap复选框和单选按钮美化插件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值