按需定制,单独加载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";