900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html复选框美化插件 Bootstrap复选框和单选按钮美化插件

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

时间:2020-03-26 19:39:24

相关推荐

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

awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写,没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动,即可完成漂亮的美化效果。

使用方法

使用这个复选框和单选按钮美化插件需要引入awesome-bootstrap-checkbox.css文件,或将awesome-bootstrap-checkbox.scss引入到你的SCSS文件中。

HTML结构

原生的Bootstrap复选框的代码类似下面的样子:

...

Check me out

...

我们需要做下面的一些轻微修改:

...

Check me out

...

上面的代码就可以使复选框得到美化效果。注意元素不能嵌套在元素中。

另外,在Opera 12中需要为元素添加class styled。

单选按钮

单选按钮的HTML结构如下:

...

One

Two

...

颜色控制

你可以使用checkbox-primary,checkbox-danger,或radio-info等class来修改复选框或单选按钮的颜色。

checkbox-circle是圆形的复选框。

checkbox-single和radio-single是不带文本的复选框和单选按钮。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。