3

我正在尝试使用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>

但它不起作用，即我仍然有默认的引导主题。

为了简化我已经合并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>

但我仍然得到默认的引导主题。

我已经检查了调试器并且所有文件都正确链接，所以我想我在使用中做错了什么。

4

2 回答 2

6

如果您使用 bootswatch 中的 less 文件，我认为您还需要使用 bootstrap 中的 less 文件。该variables.less文件将覆盖原始文件中的值。

我所做的是下载引导程序较少的文件，将bootswatch.less和复制variables.less到同一个文件夹（我重命名variables-bootswatch.less为向前兼容，如果引导表不是最新的）。

然后我修改了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 上有一个项目旨在为您构建样本主题：github 上的 swatchmaker。它应该生成适当的 CSS 文件。

于 2012-11-03T13:00:07.960 回答
0

我认为您需要更改脚本文件的顺序如下

<link href="bootstrap.css" rel="stylesheet" type="text/css">
<script src="less.js" type="text/javascript"></script>
<link href="bootswatch.less" rel="stylesheet/less">
于 2012-11-03T12:33:36.373 回答