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
&:hover
&:active,
&.active,
.open > .dropdown-toggle& {
color: #fff;;
border-color: #28a1fc;
&:hover,
&:focus,
&.focus
}
&:active,
&.active,
.open > .dropdown-toggle&
&.disabled,
&disabled,
fieldsetdisabled & {
&:hover,
&:focus,
&.focus
}
.badge
}
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