Question

我一直在调查，因为我认为花一些时间学习自定义Bootstrap的最佳做法是值得的。

我可以看到有一个友好的页面可以选择性地从http://twitter.github.io/bootstrap/customize.html自定义元素，但是我希望在不触及原始引导源文件的情况下拥有更多的控制权。

首先，我基本上想测试将网格从12列更改为16列，为此，我创建了自己的变量较少的文件并添加了@gridColumns：16;仅对此文件并在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列。

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

Answer 1

在导入原始bootstrap.less之后覆盖变量非常适合我：

@import "less/bootstrap.less"; @body-bg: red; @text-color: green; @link-color: blue;

编译上面的LESS源输出正确定制的Bootstrap CSS代码。

相关信息：http://lesscss.org/features/#variables-feature-lazy-loading

Answer 2

我在一个类似的项目中工作，我们在“第三方”位置启动了引导程序，然后仅覆盖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

在我的设置中，如果我这样做，我得到一个带有一些奇怪的.span15值的css文件（因为我没有更新@gridColumnWidth或@gridGutterWidth但是.row-fluid值实际上有效只是你期望他们的方式，因为他们是通过简单的划分计算的。）

我喜欢这个设置，因为我可以cd进入bootstrap-master和git pull并获取新的更新，而不必合并任何特定的kludges（它也让我很好地处理了我的'实际上已被覆盖了）

另一件事是，很明显shared.less只使用grid.less（而不是所有的bootstrap）。这是故意的，因为在大多数情况下你不需要所有的bootstrap，只需要它的一部分就可以了。大多数bootstrap较少的文件至少是好的，因为它们唯一的硬依赖是shared.less和mixins.less

如果这仍然不起作用，那么WinLess可能会感到困惑

Answer 3

另一个可以帮助某人的例子：

@import 'bootstrap/bootstrap/variables';

// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;

@import 'bootstrap/bootstrap';

Answer 4

一种简单的方法就是使用相同的名称覆盖样式文档中的样式，并将其标记为！important。

Bootstrap变量覆盖LESS

4 个答案: