自定义引导程序答案

【问题标题】：Customizing Bootstrap自定义引导程序
【发布时间】：2014-06-26 08:08:59
【问题描述】：

所以我正在一个使用引导程序的网站上工作。我需要自定义许多默认引导程序的外观和感觉 - 主要是配色方案和圆角框。我知道Less 用于在变量中输入默认值并重新编译它。我不知道Less，但我认为它不会很难学习。

但是为了方便测试各种配色方案，我正在为我要测试的每个元素添加一个自定义类。例如我想改变jumbotron 的外观和感觉。我在做

<div class = "jumbotron test-jumbotron">
Content here..
</div>

test-jumbotron 是我的测试班。然后在我的 CSS 中：

.test-jumbotron
{
  border: "<my-test-border-style>" !important;
  background: "<my-test-background-style>" !important;
}

我的想法是，一旦我确定了我需要的所有样式和效果，我可以使用Less（仍然不知道如何，但这是另一天的问题）将我的test-* 样式集成到Bootstrap 然后从我的文件中删除所有test-* 样式。

我认为这可能是一个固执己见的问题 - 但这种方法会奏效吗？我不想要最好的世界级解决方案，只是想知道这是否可行，或者我以后有没有可能在路上遇到路障，不得不一路折返？

【问题讨论】：

这看起来有点乏味（如果我们谈论的是“配色方案和圆角框”）。 Bootstrap 颜色和边框半径由大约（甚至少于）20 个变量控制，您可以在几分钟内进行修改。我建议您在开始发明自己的之前了解更多有关典型 Bootstrap 自定义工作流程的知识（例如查看bootswatch.com 之类的内容，看看他们如何进行自定义）。千万不要错过getbootstrap.com/css/#less。
@seven-phases-max - 感谢您的反馈和链接。其实我的改变不仅仅是配色方案和盒子，但我听到了你说的。
是的。不管怎样，让我们以 jambotron 为例。看看jumbotron.less source。你可以看到它只有 40 行长，而且由于 Less 与 CSS 并没有那不同，我想你会很快理解那里有什么以及你需要修改什么来改变它的样式（以及哪些属性如果 Bootstrap 本身未涵盖某些内容，则需要设置/覆盖）。这样一来，您将比几乎盲目地覆盖 .jumbotron 类属性然后......什么？
prideparrot.com/blog/archive/2014/6/…

【解决方案1】：

为什么不在下载之前自定义引导程序.. 他们的网站提供了功能..

然后只需编写一些调整来改进和更改您需要的内容.. 在 css 中不少于或 sass 示例中删除导航栏的默认半径

.navbar { border-radius: 0 !important; }

但如果您确实想了解所有这些，那么我认为您的方法是了解实际情况的最佳方式..

【讨论】：

【解决方案2】：

我理解您想要做什么，但是您正在重写所有您想要更改的 css 并给它另一个选择器名称这一事实违背了 LESS 的目的。

非常简化的 LESS 描述 -

对于 LESS，可以将其视为变量替换。在 css 页面 (.less) 的顶部，您将创建一堆变量（比如说颜色），然后在您的 css 文件 (.less) 的正文中，您将引用这些变量。

如果您想更改网站的配色方案，只需更改页面顶部的可变颜色 (.less)。

简单的解决方案

为了您的测试目的，我会复制 bootstrap.css 文件并在您的页面中引用它（类似于 BootstrapTest.css），而不是官方的 bootstrap.css 文件。无需将任何新类名添加到标签或页面中。只需编辑 BootstrapTest.css。

【讨论】：

不使用其他版本的引导程序的原因是因为例如我可能不需要到处更改 jumbotron 类。有些类可能，有些可能不会。我使用前缀来标记哪些引导类可以被覆盖，哪些不应该被覆盖。
啊，我明白了。如果是这种情况，那么我将继续您的路径，将新样式保留在新文件中。我会用合法名称命名选择器，因为它们位于单独的文件中。然后，我相信您将不得不手动将您的样式恢复到 LESS 引导文件中。