Twitter Bootstrap自定义最佳实践
我正在使用使用LESS的Bootstrap 2.0.3。 我想广泛地定制它，但是我想尽可能避免对源进行更改，因为对库的更改频繁。 我是LESS的新手，所以我不知道它的编译是如何完成的。 使用LESS或LESS框架的最佳实践是什么？
我的解决scheme是类似的jstam，但我尽可能避免更改源文件。 由于引导程序的更改将会频繁发生，因此我希望能够通过将修改保留在单独的文件中，从而取消最新的源代码并进行最小的更改。 当然，这不是完全的防弹。
-
将bootstrap.less和variables.less复制到父目录。 将bootstrap.less重命名为theme.less或任何你想要的。 你的目录目录结构应该如下所示：
/Website theme.less variables.less /Bootstrap ... -
将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";…
-
立即在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; } ... -
在您的HTML页面中链接到theme.less而不是bootstrap.less。
每当新版本出现时，您的更改应该是安全的。 每当新版本发布时，您还应该在自定义引导文件之间进行差异化。 variables和import可能会改变。
这也是我一直在努力的。 一方面，我想用我自己的颜色和设置高度自定义variables。 另一方面，我想尽可能地更改Bootstrap文件以简化升级过程。
我的解决scheme（现在）是创build一个插件LESS文件，并在导入variables和mixins之后将其插入到bootstrap.less文件中。 所以像这样的东西：
... // 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的颜色，字体或添加额外的mixins我可以。 我的代码是单独的，但将在Bootstrap导入的其余部分进行编译。 这不是完美的，但它是一个权宜之计对我来说很好。
从我这边来看，我只有一个名为theme.less的文件， theme.less有一个boostrap.less ，下面我重写（即使它看起来不好使用LESS，但是，更容易维护）variables值我不想更新。
这适用于variablesvariable.less中的variables.less自定义值
之后，我编译我的theme.less文件，而不是bootstrap.less
示例theme.less ：
@import "path/to/my/bootstrap.less"; @linkColor: #MyAwesomeColor;
一个更好的（恕我直言）方法是从Bootswatch github项目称为swatchmaker 。 这个项目是专门为build立和pipe理网站上的几十个Bootstrap主题而量身定做的。
项目中的Makefile构buildswatchmaker.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的命令。 请参阅项目页面上的自述文件以获取更多信息。
作为奖励，自述文件还build议您安装watchr gem，它会在.less文件更改时自动生成项目。
如果（而且只有）如果你有时间我可以做。 我保留自己的框架修改版本，并且每次更新框架时，我都会阅读文档并检查修改的源代码。
这个解决scheme听起来可能不太理想，但我有理由这样做。 我不使用一个，而是一个包含许多框架，最佳实践，重置/规范化样式表等的汞合金，我总是确信没有任何更新会以任何方式改变现有的项目。
我正在与我自己的自定义框架工作，原因如下。
- 我把每一点都去掉，我不需要保持模块化和小的东西
- 我使用我的框架进行客户工作，并希望a）知道我在做什么，而b）拥有我卖给客户的所有东西。 我不是简单地复制和使用框架，而是尝试理解和重新创build它们
- 我将我的框架与CMS结合使用，不能简单地将一个框架拖放到一个项目中/从头开始
我和Joel来到了同样的解决scheme：
自定义较less文件
就像上面描述的那样：我为自定义的所有Less文件创build本地副本：例如：“variables-custom.less”，“alerts-custom.less”，“buttons-custom.less”。 所以我可以使用一些标准，并有我自己的补充。 缺点是：当Bootstrap将被更新时，真的很难迁移。
但是还有别的东西：
覆盖样式
在寻找工作stream时，我经常会看到有人build议简单地重写样式。 因此，您先导入标准Less文件，然后在底部添加您的自定义声明。 这里的好处是：更新到更新的版本更容易。 缺点是：编译的CSS文件包含所有覆盖。 一些CSSselect器被定义两次。 所以浏览器需要做一些提升来找出实际应用的内容。 这不是很干净。
我想知道为什么预处理器不够聪明来解决这样的双重声明？ 有没有更好的工作stream程，我在这里失踪？
只需添加@import "../../styles.less"; （或任何你的样式表）在底部引导。 这允许你在自己的styles.less中使用像.gradient或者.border-radius这样的Bootstrap混搭。
