使用较少的twitter bootstrap

Question

我正在尝试使用http://bootswatch.com/中的一种风格.我想将他们的样式的.less版本应用于bootstrap.css.为此,我按照http://lesscss.org/#usage中的描述执行以下操作:

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="variables.less" rel="stylesheet/less">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

但它不起作用,即我仍然有默认的bootstrap主题.

为了简化我已经合并variables.less到bootswatch.less,所以代码现在看起来是这样的:

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

但我仍然得到默认的bootstrap主题.

我已经检查过调试器并且所有文件都已正确链接,所以我猜我在使用中做错了.

Answer 1

如果你使用bootswatch中较少的文件,我认为你还需要使用bootstrap中较少的文件.该variables.less文件将覆盖原始文件中的值.

我所做的,使其工作是下载引导少的文件,复制bootswatch.less并variables.less到同一文件夹(我改名variables-bootswatch.less为向前兼容,如果bootswatch是不是最新的).

然后我修改了bootstrap.less文件以包含上述文件:

// Header and everything before variables.less

@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "variables-bootswatch.less";

// everything else, then at the end

@import "bootswatch.less";

最后,你只需要导入这个文件(没有CSS)

<link href="bootstrap.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>

似乎github上有一个项目是为了构建你的swatch主题:github上的swatchmaker.它应该生成适当的CSS文件.