定制Bootstrap CSS模板
我刚刚开始使用Twitter的Bootstrap，想知道什么是最佳实践是定制。 我想开发一个系统，将利用一个CSS模板（Bootstrap或其他）的所有权力，完全（和容易）可修改，可持续发展（即 – 当下一个版本的Bootstrap从Twitter发布我不'不得不重新开始。
例如，我想将背景图像添加到顶部导航。 看起来有三种方法可以解决这个问题：
- 修改bootstrap.css中的.topbar类。 我不特别喜欢这个，因为我会有很多的.topbar项目，我不一定要修改它们都是一样的。
- 用我的背景图像创build新的类，并将两种样式（新的和引导到我的元素）。 这可能会造成样式冲突，这可以通过将.topbar类剥离成单独的类，然后仅使用不被我的自定义类踩到的部分来避免。 再次，这需要比我认为应该做的更多的工作，虽然它是灵活的，但是当Twitter发布下一篇文章时，我不会轻易更新bootstrap.css。
- 使用.LESS中的variables来实现自定义。 这是一个很好的方法，但没有使用。我不关心编译客户端的css和代码的可持续性。
虽然我使用Bootstrap，但这个问题可以推广到任何CSS模板。
预先感谢您的意见。
最好的办法是。
1.从github fork fork-bootstrap并在本地克隆。
他们正在迅速地改变图书馆/框架（他们在内部分歧，有些人更喜欢图书馆，我想说这是一个框架，因为改变你的页面加载时的布局）。 那么…分枝/克隆将让你轻松获取新的即将推出的版本。
2.不要修改bootstrap.css文件
当你需要升级bootstrap的时候，你的生活会变得复杂（你需要这样做）。
3.创build自己的CSS文件，并覆盖任何时候你想要的原始引导的东西
如果他们设置了一个顶栏，比方说， color: black; 但是你想它是白色的，为这个顶栏创build一个新的非常具体的select器，并在特定的顶栏上使用这个规则。 例如对于一个表，它将是<table class="zebra-striped mycustomclass"> 。 如果你在bootstrap.css之后声明你的css文件，这将覆盖你想要的任何东西。
我认为官方首选的方法是使用Less，并dynamic重写bootstrap.css（使用less.js），或重新编译bootstrap.css（使用Node或Less编译器）。
从Bootstrap文档 ，下面是如何dynamic覆盖bootstrap.css样式：
下载最新的Less.js，并在
<head>包含它的path（和Bootstrap）。<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>要重新编译.less文件，只需保存它们并重新加载您的页面。 Less.js将其编译并存储在本地存储中。
或者，如果您希望使用自定义样式静态编译新的bootstrap.css（适用于生产环境）：
通过节点安装LESS命令行工具并运行以下命令：
$ lessc ./less/bootstrap.less > bootstrap.css
自从十二月份Pabluez的回答以来，现在有一种更好的方法来定制Bootstrap。
使用： Bootswatch来生成你的bootstrap.css
Bootswatch从最新版本（无论您安装在引导目录中）构build正常的Twitter Bootstrap，还会导入您的自定义设置。 这使得使用最新版本的Bootstrap变得容易，同时保持自定义的CSS，而不必改变任何有关你的HTML。 您可以简单地摆动boostrap.css文件。
你可以使用引导模板
其中包括所有的bootstrap .less文件。 然后你可以根据需要更改variables/更新较less的文件，它会自动编译CSS。 当部署编译更less的文件到CSS。
在我看来，最好的select是编译一个自定义的LESS文件，包括bootstrap.less，一个自定义的variables.less文件和你自己的规则：
- 在根文件夹克隆引导：
git clone https://github.com/twbs/bootstrap.git - 将它重命名为“bootstrap”
- 创build一个package.json文件： https ： //gist.github.com/jide/8440609
- 创build一个Gruntfile.js： https ：//gist.github.com/jide/8440502
- 创build一个“less”文件夹
- 将bootstrap / less / variables.less复制到“less”文件夹中
- 更改字体path：
@icon-font-path: "../bootstrap/fonts/"; - 在“less”文件夹中创build一个自定义style.less文件，该文件夹导入bootstrap.less和您的自定义variables.less文件： https ：//gist.github.com/jide/8440619
- 运行
npm install - 跑
grunt watch
现在，您可以按照自己的想法修改variables，覆盖自定义style.less文件中的引导程序规则，并且如果有一天想要更新引导程序，则可以replace整个引导程序文件夹！
编辑：我使用这种技术创build了一个Bootstrap样板： https ： //github.com/jide/bootstrap-boilerplate
我最近写了一篇关于我在Udacity过去几年如何做的文章 。 这个方法意味着我们可以在任何时候更新Bootstrap而不会合并冲突，抛出工作等。
这个post比较深入的例子，但基本的想法是：
- 保持引导程序的原始副本，并在外部覆盖它。
- 修改一个文件（bootstrap的variables.less）以包含你自己的variables。
- 使您的网站文件@包括bootstrap.less，然后您的覆盖。
这意味着使用LESS，并将其编译到CSS，然后将其发送到客户端（客户端LESS，如果挑剔，我通常会避免它），但它对于可维护性/可升级性极其有利，并且获得LESS编译真的很简单。 链接的github代码有一个使用grunt的例子，但是有很多方法可以实现这一点 – 甚至是graphics用户界面，如果这是你的事情。
使用此解决scheme，您的示例问题将如下所示：
- 在你的variables中使用@ navbar-inverse-bg来更改导航栏颜色（不是引导程序的）
- 将自己的导航栏样式添加到bootstrap_overrides.less中，随时覆盖所需的任何内容。
- 幸福。
当升级bootstrap的时候，你只需要换出原始的bootstrap副本，所有的东西都能正常工作（如果bootstrap发生了重大的变化，你需要更新你的覆盖，但是你必须这样做）
博客文章与步行在这里 。
github上的代码示例就在这里 。
使用LESS与Bootstrap …
以下是如何使用LESS的Bootstrap文档
（自从以前的答案他们已经移动了）
