如何正确地定制Bootstrap主题？

Question

我想使用Bootstrap主题，但我需要进行定制。正确的方式是什么？我应该创建一个新的CSS文件来覆盖默认的CSS吗？

- akselrows

Answer 1

我刚写了一篇文章，关于我在Udacity过去几年中是如何做的。这种方法意味着我们可以随时更新Bootstrap，而不会出现合并冲突、抛弃工作等情况。

文章更详细地讲解了一些例子，但基本思想是：

• 保留一个原版 Bootstrap 的副本，并在外部进行覆盖。
• 修改一个文件（bootstrap 的 variables.less），将自己的变量包含在内。
• 在站点文件中使用 @include bootstrap.less，然后使用自定义覆盖。

当升级 Bootstrap 时，只需替换原始 Bootstrap 副本即可，所有内容仍能正常运行。

这里是带演示的文章。

Github 上的代码示例在这里。

- betaorbust

---

该帖子的链接已失效。这是 archive.org 的链接。https://web.archive.org/web/20180109002007/https://betaorbust.com/maintainable-bootstrap-customization/ - Mads Skjern

Answer 2

首先，根据您的问题，我认为有两个步骤。

1. 熟悉Bootstrap，文档非常好。因此，在自定义之前，最好了解它的工作原理，至少是基本的方式。

2. 可能最简单的自定义Bootstrap的方法是通过其自己的网站。在那里，您可以更改诸如一般颜色、表单、下拉菜单、导航栏等内容。

如果您有具体问题，请告诉我。

- Horacio

---

谢谢@HORACIO。也许很快我会有其他关于此事的问题。非常感谢。 - akselrows

Answer 3

你可能希望保留未修改的Bootstrap文件。这样，如果需要，您可以将其更新到新版本。

因此，在定制时的正确方法是添加自己的CSS文件（至少在开发过程中）。

- liopic

---

我已经下载了一个免费的Bootstrap主题，现在想要对其进行自定义。我需要创建一个新的CSS文件吗？ - akselrows

是的，在 bootstrap.css 之后加载它（在 HTML 的头部区域）。 - liopic

那么响应性仍然保持不变吗？ - akselrows

是的，除非您覆盖与此相关的规则。 - liopic

Answer 4

我认为最好的方法是创建一个新的主CSS文件。你应该包含bootstrap.css和其他东西，但在bootstrap CSS文件上进行编辑可能不是一个好主意。

- birlikbilisim

---

我不喜欢使用LESS。 - birlikbilisim

这有什么用途？ - akselrows

LESS 让一些事情变得更容易，但我猜你是一个新手。你应该学习更多关于 bootstrap 的知识，然后你就可以决定是否需要使用 LESS。 - birlikbilisim

感谢@birlikbilisim - akselrows

Answer 5

这个已经被彻底记录下来了。我看过大概30种方法来做到这一点。到目前为止，我遇到的最优雅和最好的解决方案之一在这篇博客文章中有所描述。

完全相同的原则也适用于这个工作流程。只是设置不同而已。如果你想将Bootstrap作为依赖项而不触及源代码，那么这个方法更好。

- montecruiseto