按需定制,单独加载bootstrap特定模块 - dongyuwei/blog GitHub Wiki

按需加载bootstrap特定模块,就需要单独编译bootstrap特定模块。 比如你只对bootstrap的按钮感兴趣,只想引用按钮对应的样式,则可以新建一个less文件( custom_button.less ):

/*先引入variables.less和mixins.less,再引入buttons.less*/
@import "variables.less"; 
@import "mixins.less";

@import "buttons.less";

编译lessc custom_button.less > custom_button.css custom_button.css 就是你想要的样式了。

重载(自定义)bootstrap模块样式

如果想自定义button样式,可以修改下面的变量(button对应变量都包含在 variables.less 文件中),然后重新使用lessc编译:

// Buttons
// -------------------------
@btnBackground:                     @white;
@btnBackgroundHighlight:            darken(@white, 10%);
@btnBorder:                         #bbb;

@btnPrimaryBackground:              @linkColor;
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);

@btnInfoBackground:                 #5bc0de;
@btnInfoBackgroundHighlight:        #2f96b4;

@btnSuccessBackground:              #62c462;
@btnSuccessBackgroundHighlight:     #51a351;

@btnWarningBackground:              lighten(@orange, 15%);
@btnWarningBackgroundHighlight:     @orange;

@btnDangerBackground:               #ee5f5b;
@btnDangerBackgroundHighlight:      #bd362f;

@btnInverseBackground:              #444;
@btnInverseBackgroundHighlight:     @grayDarker;

推荐把上面的代码放在在 custom_button.less 中修改,而不要直接修改 variables.less 文件。比如 custom_button.less 以下面的形式:

@import "variables.less"; 
@import "mixins.less";

@btnBorder:red; //重载button border样式
@import "buttons.less";