自定义Bootstrap CSS模板

Question

我刚刚开始使用Twitter的Bootstrap，并且想知道自定义的“最佳实践”是什么。我想开发一种系统，该系统将利用css模板（Bootstrap或其他）的所有功能，完全（轻松）地进行修改，具有可持续性（即–从Twitter发布下一版本的Bootstrap时，我不会）不必重新开始。

例如，我想将背景图像添加到顶部导航中。看来有3种方法可以解决此问题：

1. 修改bootstrap.css中的.topbar类。我不是特别喜欢这个，因为我会有很多.topbar项，并且我不一定要用相同的方式进行修改。
2. 用我的背景图像创建新类，然后将两种样式都应用（新样式和引导样式应用于我的元素）。这可能会产生样式冲突，可以通过将.topbar类剥离到单独的类中，然后仅使用未由我的自定义类踩下的片段来避免。再次，这需要比我认为必要的工作更多的工作，并且尽管它很灵活，但是当Twitter发布下一部分时，它不允许我轻松地更新bootstrap.css。
3. 使用.LESS中的变量来实现自定义。副手这似乎是一个不错的方法，但是没有使用过。除非我担心在客户端上编译css和代码的可持续性。

尽管我使用的是Bootstrap，但是这个问题可以推广到任何CSS模板。

预先感谢您的输入。

Answer 1

最好的办法是。

1.从github派生twitter-bootstrap并在本地克隆。

他们正在迅速地改变库/框架（它们在内部有所不同。有些人更喜欢库，我会说这是一个框架，因为从将其加载到页面时开始就更改了布局）。好吧…分叉/克隆将使您轻松获取即将推出的新版本。

2.不要修改bootstrap.css文件

当您需要升级引导程序时（这将使您的生活变得复杂）。

3.创建自己的css文件，并在需要原始引导程序内容时覆盖

假设他们使用设置了一个顶部栏，color: black;但您希望将其设置为白色，请为此顶部栏创建一个非常具体的新选择器，并在特定顶部栏上使用此规则。例如，对于一个表，它将为<table class="zebra-striped mycustomclass">。如果您在之后声明css文件bootstrap.css，这将覆盖您想要的任何内容。