70

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

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

首先，我基本上想测试将网格从 12 列更改为 16 列，为此，我创建了自己的变量 less 文件并添加了 @gridColumns:16; 仅此文件并在 bootstrap.less 中导入此自定义 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 列。

谁能指出我做错了什么？

4

4 回答 4

154

导入原始文件后覆盖变量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

于 2013-10-22T10:10:44.767 回答
43

我在一个类似的项目中工作，我们在“第三方”位置进行引导，然后仅覆盖mixins.less和variables.less. 我们为此使用的模式添加了三个文件，并且根本不涉及引导程序（允许您轻松放入替换）：

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

混合文件

/*
 *    /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 （而不是所有引导程序）。这是有意的，因为在大多数情况下，您不需要所有引导程序，只需要其中的一部分即可。大多数无引导文件至少是好的，因为它们唯一的硬依赖是shared.less和mixins.less

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

于 2013-05-03T23:39:21.997 回答
1

另一个可能对某人有帮助的例子：

@import 'bootstrap/bootstrap/variables';

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

@import 'bootstrap/bootstrap';
于 2016-08-05T00:48:58.650 回答
-4

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

于 2018-02-20T01:44:21.820 回答