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

Answer 2

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

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

使用较少的twitter bootstrap

2 个答案: