您的位置:首页 > Web前端 > BootStrap

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

2017-03-23 10:28 393 查看
今天写单选框的时候,根据要求需要美化样式,原来的样式太丑了。为了不重复写轮子,想到寻找插件解决。找到一款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复选框和单选按钮美化插件

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: