按需定制,单独加载bootstrap特定模块

技术文档网 2021-04-28

按需加载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";

相关文章

  1. Web服务器缓存

    一、URL映射 对于任何的web服务器,当我们向他发送一个http请求后,它要做的主要工作就是解析URL,然后完成从URL到实际内容或资源的映射。这里所说的映射是一个抽象概念,实际上就是服务器处理请

  2. 静态资源加载

    在模块化开发模式下,静态资源需要程序自己收集,因此为一个单独页面指定特定的静态资源加载的方式已经不能满足了。 针对于单个请求,最优的加载方案是实时收集需要的模块静态资源并输出,不会浪费带宽。但是,一旦

  3. 服务器推技术实现

    ajax定时请求 通过ajax异步请求,并每隔一段时间请求一次如setInterval或客户端循环请求等 setInterval(function() { $.ajax({ u

  4. 移动端滚动穿透问题

    定义:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫 “滚动穿透” 解决方案1 在弹出层的touchstart事件中调用preventDefault 这种方法不可取,至少有

  5. 移动端屏幕尺寸与像素密度

    一、英寸与厘米转换 1 inch = 2.54cm = 25.4mm 二、像素间距 像素(Pixels)是组成数字图像的最小单元,即一个一个彩色的颜色点。 一般人都以为像素是一个个的小圆点,实际上

随机推荐

  1. Web服务器缓存

    一、URL映射 对于任何的web服务器,当我们向他发送一个http请求后,它要做的主要工作就是解析URL,然后完成从URL到实际内容或资源的映射。这里所说的映射是一个抽象概念,实际上就是服务器处理请

  2. 静态资源加载

    在模块化开发模式下,静态资源需要程序自己收集,因此为一个单独页面指定特定的静态资源加载的方式已经不能满足了。 针对于单个请求,最优的加载方案是实时收集需要的模块静态资源并输出,不会浪费带宽。但是,一旦

  3. 服务器推技术实现

    ajax定时请求 通过ajax异步请求,并每隔一段时间请求一次如setInterval或客户端循环请求等 setInterval(function() { $.ajax({ u

  4. 移动端滚动穿透问题

    定义:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫 “滚动穿透” 解决方案1 在弹出层的touchstart事件中调用preventDefault 这种方法不可取,至少有

  5. 移动端屏幕尺寸与像素密度

    一、英寸与厘米转换 1 inch = 2.54cm = 25.4mm 二、像素间距 像素(Pixels)是组成数字图像的最小单元,即一个一个彩色的颜色点。 一般人都以为像素是一个个的小圆点,实际上