twitter-bootstrap 使用 bootstrap-sass 时如何自定义 bootstrap css

How to customize bootstrap css when using bootstrap-sass

提问by Mathieu

I'd like to change many things, for example buttons color or for example change the background-image color on the nav bar (header). I use boostrap-sass gem so i can't use boostrap website' Customize page

我想更改很多东西，例如按钮颜色或例如更改导航栏（标题）上的背景图像颜色。我使用 boostrap-sass gem 所以我不能使用 boostrap 网站的自定义页面

Should I really override all these on my file custom.css.scss or can I change these somewhere more low level ? i don't find the .css files allowing me to do that in my project file (I searched all lib, app and vendor /assets but noweher i find the css of boostrap. i suspect it's because they're not there but they're directly in the gem files) I have a lot of changes so i feel overiding so many things is not the best option.

我真的应该在我的文件 custom.css.scss 上覆盖所有这些还是我可以在更低级别的地方更改这些？我没有在我的项目文件中找到允许我这样做的 .css 文件（我搜索了所有的库、应用程序和供应商/资产，但没有找到 boostrap 的 css。我怀疑这是因为它们不在那里，但它们）直接在 gem 文件中）我有很多变化，所以我觉得覆盖这么多东西不是最好的选择。

What's the best way to do this? Thanks

做到这一点的最佳方法是什么？谢谢

采纳答案by amb110395

You should never modify Boostrap's original files. The best option is to override their classes with your own ones. You can do this by creating a css file in your assets/stylesheets folder, which will be included automatically in your app.

你永远不应该修改 Boostrap 的原始文件。最好的选择是用你自己的类覆盖他们的类。您可以通过在您的 assets/stylesheets 文件夹中创建一个 css 文件来完成此操作，该文件将自动包含在您的应用程序中。

回答by gillytech

I have started using the Sass flavor of Twitter Bootstrap and I just came up with a sensible way of structuring my files so I can make my own custom overrides without messing with the core files AND keep all your CSS in one file for faster loading.

我已经开始使用 Twitter Bootstrap 的 Sass 风格，我刚刚想出了一种合理的方式来构建我的文件，这样我就可以创建自己的自定义覆盖，而不会弄乱核心文件，并将所有 CSS 保存在一个文件中以加快加载速度。

In a nutshell I put all the sass files into assets/sass and make a subdirectory called bootstrapfor the core files. I then make a sibling directory called themefor my custom scss files.

简而言之，我将所有 sass 文件放入 assets/sass 并为核心文件创建一个名为bootstrap的子目录。然后我为我的自定义 scss 文件创建一个名为theme的兄弟目录。

Go to /bootstrapand inside this directory is a file called bootstrap.scsswhich includes all the core components. Rename this file to theme.scssand put it in the parent directory like this:

转到/bootstrap该目录并在bootstrap.scss其中包含一个名为的文件，其中包含所有核心组件。将此文件重命名为theme.scss并将其放在父目录中，如下所示：

As you can see I already have some custom overriding sass includes files already in the theme directory. These will be tacked on to the bottom of the default bootstrap CSS when it's compiled.

正如你所看到的，我已经有一些自定义的覆盖 sass 包含文件已经在主题目录中。这些将在编译时添加到默认引导 CSS 的底部。

The magic happens when you go into theme.scssand change the include paths like so. Look toward the bottom of the image for the overrides and toward the top for the custom variables reference.

当您像这样进入theme.scss并更改包含路径时，魔法就会发生。朝图像底部查看覆盖，朝顶部查看自定义变量引用。

Note:If you want to edit the variables in bootstrap, it's a good idea to make your own _variables.scssfile in your themedirectory and include it at the topof your theme.scssfile. This way you can override the bootstrap variables which will persist with updates in the future.

注意：如果你想在引导编辑的变量，这是一个好主意，使你自己的_variables.scss文件在你的theme目录，包括它在顶部您的theme.scss文件。通过这种方式，您可以覆盖引导变量，这些变量将在将来随更新而持续存在。

Then just include theme.cssin your pages and voila. This is how I have started doing it and haven't run into any bugs yet.

然后只需包含theme.css在您的页面中，瞧。这就是我开始这样做的方式，并且还没有遇到任何错误。

I find this the least complicated of the methods I have seen. And when new updates come down I'll just update the core bootstrap files and keep my edits!

我发现这是我见过的最简单的方法。当新的更新出现时，我只会更新核心引导程序文件并保留我的编辑！

回答by Captain America

I too have this same issue and I like gillytech's answer, but I would like to add that you do not need to copy everything from the _variables.scss file into your own variables file. Your just need to declare and use the same variables that Bootstrap is using and make sure you will be loading your variables files before Bootstrap's _variables.scss file is loaded.

我也有同样的问题，我喜欢 gillytech 的回答，但我想补充一点，您不需要将 _variables.scss 文件中的所有内容复制到您自己的变量文件中。您只需要声明和使用 Bootstrap 正在使用的相同变量，并确保在加载 Bootstrap 的 _variables.scss 文件之前加载变量文件。

You will notice that many of the Bootstrap variables have a "!default" after assigning a value to it. This means that sass will not overwrite it if it is already defined.

您会注意到许多 Bootstrap 变量在为其赋值后都有一个“!default”。这意味着如果它已经被定义，sass 将不会覆盖它。

So my theme.scss file looks like this:

所以我的 theme.scss 文件如下所示：

@import "superhero-variables";
@import "bootstrap";
@import "superhero-theme";

Found this here under "Styling Bootstrap with Variables": http://pivotallabs.com/sass-with-bootstrap/

在“带变量的样式引导程序”下找到了这个：http: //pivotallabs.com/sass-with-bootstrap/