变量 – 用LESS覆盖的引导变量

我一直在调查整天，因为我认为这将是值得花一些时间来学习定制 Bootstrap的最佳实践。

我可以看到有一个友好的页面可用于定制元素有选择地从http://twitter.github.io/bootstrap/customize.html，但我想有更多的控制，而不触摸原始的引导源文件。

首先，我基本上想测试改变网格从12到16列，并做到这一点，我创建了自己的变量较少的文件，并添加了@gridColumns：16;只有这个文件和导入这个自定义less里面的bootstrap.less如下。

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

然后，使用WinLess编译的bootstrap.less文件获得新的bootstrap.css与重写的变量导入调用和链接css与html文件，但网格不会更改为16列。

任何人都可以指出我做错了什么？

解决方法

我在一个类似的项目，我们在“第三方”位置引导，然后覆盖只有mixins.less和variables.less。我们使用的模式添加了三个文件，不会触摸引导(允许你轻松放弃替换)：

/style
|- bootstrap-master/
|    |- less/
|    |- js/
|   ...
|- shared/
    |- shared.less
    |- variables.less
    |- mixins.less

mixins文件

/*
 *    /style/shared/mixins.less
 */

@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

变量文件，这是您将覆盖的网格

/*
 *    /style/shared/variables.less
 */

@import "../bootstrap-master/less/variables.less";

@gridColumns: 16; // let's pretend this is your site-specific override

实际导入(或通过少量编译器馈送)的文件：

/*
 *    /style/shared/shared.less
 */

@import "variables.less";
@import "mixins.less";

@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

在我的设置，如果我这样做，我得到一个css文件与一些奇怪的.span15值(因为我没有更新@gridColumnWidth或@gridGutterWidth，但.row流体值实际上是按照你期望的方式工作因为它们是通过简单的除法计算的)。

我喜欢这个设置，因为我可以cd进入bootstrap-master和git pull和获取新的更新，而不必合并任何我的具体kludges(它也给我一个很好的处理我实际上覆盖)

另一件事是，很清楚，shared.less只使用grid.less(而不是所有的bootstrap)。这是有意的，因为在大多数情况下，你不需要所有的bootstrap，只是它的几个部分去。大多数bootstrap少文件至少是好的，因为他们只有hard依赖是shared.less和mixins.less

如果这仍然不工作，那么也许WinLess正在困惑

变量 – 用LESS覆盖的引导变量

解决方法

猜你在找的Bootstrap相关文章