当前位置：首页 > 网页特效 > 选择框

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

分类：选择框日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<link rel="stylesheet" href="css/awesome-bootstrap-checkbox.css"/>  
```              
#####  HTML结构
原生的Bootstrap复选框的代码类似下面的样子：

```html
<form role="form">
  ...
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  ...
</form>           
```   
我们需要做下面的一些轻微修改：

```html
<form role="form">
  ...
  <div class="checkbox">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">
        Check me out
    </label>
  </div>
  ...
</form>       
```         
上面的代码就可以使复选框得到美化效果。注意input元素不能嵌套在<label>元素中。

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

```html
<input type="checkbox" id="checkbox1" class="styled">          
```      
#####  单选按钮
单选按钮的HTML结构如下：

```html
<form role="form">
  ...
  <div class="radio">
      <input type="radio" name="radio2" id="radio3" value="option1">
      <label for="radio3">
          One
      </label>
  </div>
  <div class="radio">
      <input type="radio" name="radio2" id="radio4" value="option2" checked>
      <label for="radio4">
          Two
      </label>
  </div>
  ...
</form>           
```   
#####  颜色控制
你可以使用checkbox-primary，checkbox-danger，或radio-info等class来修改复选框或单选按钮的颜色。

checkbox-circle是圆形的复选框。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果