表单/表格
Bootstrap单选按钮和复选框美化特效
PetitQ
这是一款使用 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 中的演示。
Github 地址：https://github.com/flatlogic/awesome-bootstrap-checkbox
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
