【问题标题】:Twitter Bootstrap Customization responsiveTwitter Bootstrap 自定义响应式
【发布时间】:2013-05-05 15:15:52
【问题描述】:
【问题讨论】:
标签:
css
twitter-bootstrap
less
【解决方案1】:
如果您想知道如何使用 less 来自定义引导 css,然后在您的项目中使用它,那么有一些基本方法。
您可以将您的自定义组合到基本引导 css 文件中并将其导入到您的项目中,或者您可以保留引导文件不变,为您的自定义创建第二个 css 文件并将其也导入到您的项目中,在引导程序之后css。
覆盖与覆盖。
从您提供的第一个链接中,您可以看到这两种方法都有其支持者。
我通常使用第一种方法,这就是我所做的。
- 下载一份less文件here is one source,并添加到您的项目文件中
- 打开 bootstrap.less 文件。您会看到它编排了所有内容并导入了各个较少的文件
- 创建 theme-variables.less 和 theme-css.less 文件并保存到这个 less 文件夹中
- 您需要以正确的顺序导入这些文件。在 Core variables 和 mixins 块的末尾添加变量文件
@import "theme-variables.less"; 和在 Base CSS 块末尾的主题文件 @import "theme-css.less"; 对我有用。根据您正在定制的内容,您可能需要稍微尝试一下
基本上就是这样。编辑您的自定义文件,编译 bootstrap.less,并将生成的 bootstrap css 文件导入您的项目。
一开始您自然希望保留良好的备份以防出现问题,升级 Bootstrap 时也是如此。
祝你好运!