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

不念不忘少年蓝@ 2022-09-30 14:59 282阅读 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 条评论，282人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 angularjs单选和复选按钮

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

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

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

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

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

相关用户界面（单选按钮和复选框的使用）

用户界面：单选按钮和复选框的使用步骤：一、继承JFrame 二、定义面板，组件三、构造函数中 1. 创建组件 2. 设置布局 3. 添加组件到面板

港控/mmm°/ 2022年05月06日 05:28/ 0 赞/ 272 阅读

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

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

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

相关 bootstrap 复选框及单选按钮

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

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

相关单选按钮和复选框

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

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

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

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

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