Question

所以我正在使用bootstrap的网站上工作。我需要定制许多默认的bootstrap外观 - 主要是配色方案和圆形框。我知道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（仍然不知道如何，但这是另一天的问题）来整合我的{{1将样式转换为test-*，然后从我的文件中删除所有Bootstrap样式。

我认为这可能是一个自以为是的问题 - 但这种方法会起作用吗？我不想要最好的最佳世界级解决方案，只是想知道这是否可行，或者我是否有可能在以后的路上遇到障碍并且必须一直回溯？

Answer 1

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

然后只是写一些调整来改进和改变你需要的东西..在css中不少或sass例子删除导航栏的默认半径

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

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

Answer 2

我理解你要做的是什么，但事实上你正在重写你想要改变的所有css并给它另一个选择器名称，这就失败了LESS的目的。

非常简化的LESS描述 -

使用LESS，将其视为可变替代品。在css页面的顶部（.less）你会创建一堆变量（比方说颜色），然后在你的css文件（.less）的主体中你会引用这些变量。

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

简单解决方案

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