Twitter Bootstrap定制最佳实践

Question

我正在使用LESS使用Bootstrap 2.0.3.我想广泛地自定义它,但我想尽可能避免对源进行更改,因为库的更改经常发生.我是LESS的新手,所以我不知道它的编译是如何完全有效的.使用基于LESS或LESS的框架有哪些最佳实践？

Answer 1

我的解决方案类似于jstam,但我尽可能避免对源文件进行更改.鉴于对bootstrap的更改将经常发生,我希望能够通过将我的修改保存在单独的文件中来下载最新的源并进行最小的更改.当然,它并不完全是防弹.

1. 将bootstrap.less和variables.less复制到父目录.将bootstrap.less重命名为theme.less或任何你想要的.您的目录目录结构应如下所示:

   /Website            
        theme.less
        variables.less
        /Bootstrap
        ...
   

2. 更新theme.less中的所有引用以指向引导子目录.确保您的variables.less是从父级而不是引导程序目录引用的,如下所示:

   ...
   // CSS Reset
   @import "bootstrap/reset.less";
   
   // Core variables and mixins
   @import "variables.less"; // Modify this for custom colors, font-sizes, etc
   @import "bootstrap/mixins.less";
   
   // Grid system and page structure
   @import "bootstrap/scaffolding.less";
   @import "bootstrap/grid.less";
   @import "bootstrap/layouts.less";
   

   ...

3. 在包含它们之后立即在theme.less文件中添加CSS覆盖.

   ...
   // Components: Nav
   @import "bootstrap/navs.less";
   @import "bootstrap/navbar.less";
   
   // overrides
   .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
       border-radius: 0 0 0 0;
       padding: 10px;
   }
   
   .nav-tabs, .nav-pills {
       text-transform: uppercase;
   }
   
   .navbar .nav > li > a {
       text-shadow: none;
   }
   
   ...
   

4. 链接到theme.less而不是HTML页面中的bootstrap.less.

每当新版本发布时,您的更改应该是安全的.每当新版本发布时,您还应该在自定义引导程序文件之间进行区分.变量和进口可能会发生变化.

Answer 2

这也是我一直在努力的事情.一方面,我想用我自己的颜色和设置高度自定义variables.less文件.另一方面,我想尽可能地更改Bootstrap文件以简化升级过程.

我的解决方案(目前)是创建一个addon LESS文件,bootstrap.less并在导入变量和mixin后将其插入到文件中.所以像这样:

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

这样,如果我想重置Bootstrap颜色,字体或添加额外的mixin我可以.我的代码是独立的,但将在其余的Bootstrap导入中编译.它并不完美,但它是一个对我有用的权宜之计.

Answer 3

从我的角度来看,我只是有一个以theme.less其中的导入命名的文件boostrap.less,并且在下面我覆盖(即使使用LESS似乎很糟糕,但是,它更容易维护)变量值我不想更新.

这适用于具有变量的自定义值 variables.less

之后我编译我的theme.less文件而不是bootstrap.less

示例theme.less:

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

Answer 4

一个更好的(恕我直言)方法是从名为swatchmaker的Bootswatch github项目中获取提示.该项目专门用于构建和管理网站上的数十个Bootstrap主题.

该Makefile项目建立swatchmaker.less(你可以像重命名为customizations.less).此文件包含一堆导入:

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

您可以将swatch文件夹和bootswatch.less文件重命名为您认为合适的任何内容.

这是有道理的,因为您可以在不影响自己的文件的情况下升级Bootstrap.实际上,Makefile它还包含获取最新版Bootstrap的命令.有关更多信息,请参阅项目页面上的README.

作为奖励,README还建议您安装watchrgem,它将在.less文件更改时自动构建项目.