bootstrap自定义功能按钮

在bs中，都有用过.btn-defaule 或者 .btn-primary ,我们也可以自定义我们想要的按钮效果。

（1）准备一组新的按钮变量，在 bs，less文件中，打开variables.less，

可以看到原始的一些数据，

@btn-danger-color:               #fff;
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              darken(@btn-danger-bg, 5%);

按照这个模子写我们自己的

@brand-feature:                   #ff0;
@btn-feature-color:               #fff;
@btn-feature-bg:                  @brand-feature; //注意，@brand-feature需我们自己在上面定义，或者你写成颜色值，也可，考虑到多处需要用到，还是在上面定义一下比较好
@btn-feature-border:              darken(@btn-feature-bg, 5%);

（2）然后创建一个文件夹来保存自定义按钮的样式，新建buttons-custom.less并根据bootstrap/buttons.less中的混入写一个下面这样的混入调用。

.btn-feature{
    .button-variant(@btn-feature-color; @btn-feature-bg;  @btn-feature-border);
}

在bootstrap/mixins.less，可以看到.button-variant 的调用方式

.button-variant(@color; @background; @border)

在buttons.less中可以看到.btn-default等是如何调用的。

（3）保存文件，，并添加到bootstrap.less中，进行编译。

（4）在网页中进行调用 .btn-feature即可。