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

不念不忘少年蓝@ 2022-09-30 14:59 226阅读 0赞

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

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

下载插件。目录如下![Image 1][]

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

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

个人总结：

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

2、个人选用的是单选按钮，样式如图![Image 1][]

html代码如下![Image 1][]

将以下代码拷贝到项目中，因为使用了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相同。解决问题，使用代码如下

![Image 1][]

参考文章：

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

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

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

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关单选按钮和复选框传递数据

目录理论：单选按钮组常用属性设置事件监听器单选按钮设置事件监听器复选框常用方法设置事件监听器具体例子：创建安卓应用将背景图

约定不等于承诺〃/ 2024年03月30日 10:52/ 0 赞/ 14 阅读

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

[官网地址][Link 1] 需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体

青旅半醒/ 2022年09月30日 15:00/ 0 赞/ 295 阅读

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

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

不念不忘少年蓝@/ 2022年09月30日 14:59/ 0 赞/ 227 阅读

相关单选框，复选框，下拉列表的美化

参考：[http://www.jq22.com/yanshi9351][http_www.jq22.com_yanshi9351] ![这里写图片描述][20160911

野性酷女/ 2022年09月25日 14:21/ 0 赞/ 240 阅读

相关 angularjs单选和复选按钮

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8">

朴灿烈づ我的快乐病毒、/ 2022年07月14日 22:51/ 0 赞/ 198 阅读

相关 jQuery 单选框/复选框美化

对于前端萌新来说，美化表单是个痛苦的事情，通常都是去寻找插件这种逃避的办法，其实这并不是难事。在上篇文章中提到了兄弟元素选择器在表单美化中表现突出，下面的示例源码将体现基础篇

我不是女神ヾ/ 2022年05月10日 00:08/ 0 赞/ 407 阅读

相关 Bootstrap复选框，单选框美化特效

引用地址：[http://www.jq22.com/jquery-info11319][http_www.jq22.com_jquery-info11319] 该链接有cs

喜欢ヅ旅行/ 2022年04月10日 01:52/ 0 赞/ 350 阅读

相关 bootstrap 复选框及单选按钮

<div class="form-group floating-label"> <label >是否开启RMB购买</label> <

喜欢ヅ旅行/ 2021年12月14日 14:05/ 0 赞/ 398 阅读

相关单选按钮和复选框

单选按钮（RadioButton）和复选按框（CheckBox）都是很常用的组件，尤其是在对话框中。单选按钮（RadioButton）是一种具有排他性的选择组件，用户每一次只能

╰+哭是因爲堅強的太久メ/ 2021年11月29日 11:30/ 0 赞/ 478 阅读

相关 CSS3美化单选按钮和复选按钮

1.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-

迷南。/ 2021年09月13日 14:46/ 0 赞/ 484 阅读