Twitter Bootstrap定制最佳实践

Question

Twitter Bootstrap定制最佳实践我正在使用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

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

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

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

示例theme.less：

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