Twitter Bootstrap自定义响应式设计

Question

我想设置类似于Twitter Bootstrap Customization Best Practices的样式，但我想使用响应式版本。我找到了这个帖子Twitter Bootstrap responsive css is not generated form the less files，但我不清楚如何设置bootstrap文件以便使用响应式版本进行自定义?

- Petran

Answer 1

如果您想了解如何使用less来自定义bootstrap css并在项目中使用它，那么有两种基本方法。您可以将自定义内容合并到基础bootstrap css文件中，并将其导入到您的项目中，或者您可以保留bootstrap文件不变，为自定义创建第二个css文件，并在导入bootstrap css之后也将其导入到您的项目中。覆盖与重写。从您提供的第一个链接中可以看出，这两种方法都有支持者。我通常使用第一种方法，这也是我所做的。

• 下载less文件的副本，这里是一个来源，并将其添加到您的项目文件中
• 打开bootstrap.less文件。您会看到它编排了所有内容并导入了各个less文件
• 创建theme-variables.less和theme-css.less文件，并保存到这个less文件夹中
• 您需要按正确的顺序导入这些文件。将变量文件添加到核心变量和混合块的末尾，使用@import "theme-variables.less";，并将主题文件添加到基本CSS块的末尾，使用@import "theme-css.less";对我很有用。根据您正在自定义的内容，您可能需要稍微调整一下

基本上就是这样。编辑您的自定义文件，编译bootstrap.less，并将生成的bootstrap css文件导入到您的项目中。

当然，在开始时，您需要保留好备份，以防出现问题，同样，在升级Bootstrap时也要这样做。

祝你好运！

- David Taiaroa

Answer 2

首先，下载来自https://github.com/twbs/bootstrap的less版本。

如何使用Less和Less编译器，详见 http://lesscss.org/ http://winless.org/

Bootstrap教程详见 http://www.w3resource.com/twitter-bootstrap/tutorial.php

- ShibinRagh