Bootstrap 样式定制-lessc编译源码

1、github上下载源码；解压；如目录bootstrap

2、新建同级目录custom-bootstrap ，在该目录下新建 如下三个文件；其实就是bootstrap下面的bootstrap.less 和variables.less文件拷贝过来 改个名字（新增一个custom-other.less  为了新增些不在variables.less的属性）

3、custom-bootstrap.less 中  导入 bootstrap目录的bootstrap.less、custom-variables.less、custom-other.less、bootstrap目录的/utilities.less（这是最后导入的一些属性）

@import "../bootstrap/less/bootstrap.less";

@import "custom-variables.less";    
      @import "custom-other.less";

@import "../bootstrap/less/utilities.less";

4、custom-variables.less 改变某个属性 如字体大小；

@font-size-base: 12px;

4、custom-other.less 中加入新增的改变的属性 如改变确认按钮的初始和悬浮状态代码；

.btn-primary {

color: #fff;

border-color: #0080ff;

&:focus,
&.focus

Unknown macro: { color}

&:hover

Unknown macro: { color}

&:active,
&.active,
.open > .dropdown-toggle& {
color: #fff;;

border-color: #28a1fc;

&:hover,
&:focus,
&.focus

Unknown macro: { color}

}
&:active,
&.active,
.open > .dropdown-toggle&

Unknown macro: { background-image}

&.disabled,
&disabled,
fieldsetdisabled & {
&:hover,
&:focus,
&.focus

Unknown macro: { background-color}

}

.badge

Unknown macro: { color}

}

5、编译less文件；首先需要nodejs—安装全局less—编译less成为css (压缩成min.css)

#npm install -g less

#lessc custom-bootstrap.less >bootstrap.css

#lessc -x custom-bootstrap.less >bootstrap.min.css