1

提前感谢您的阅读。

使用 CDN，我将以下 API / 库合并到我的项目中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<link rel="stylesheet/less" type="less" href="custom/main.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>

我也在导入jquery但less不使用 CDN 这样做。

less我在添加 Jasny Bootstrap（上图）之前使用的文件运行良好；我的 main.less 文件less在导入 Jasny 集之前从 Bootstrap 导入所有变量和 mixins。Main.less看起来像这样：

@import "less/bootstrap.less";
@import "jasny-variables.less";

@navmenu-width:    225px;

当我从 Jasny Bootstrap 实现“Off Canvas”组件时，它也可以正常工作；出现一个画布外菜单并将所有内容推到右侧。

但是，当我尝试更改一些 Jasnyless变量时（或者通过将它们添加到我的main.less文件 [正如我上面所做的那样]，或者直接在jasny-variables.less文件中更改它们 [main.less从同一目录导入]），我没有看到任何结果。

具体来说，我试图将 的值更改@navmenu-width为小于默认值。然而，无论我给它什么价值，在任何一个来源中，它都不会改变。

建议？

4

1 回答 1

2

如果您想更改 jasny-bootstrap LESS 变量，您需要下载它的源代码（右侧有“下载 zip”按钮）并将所有它的 less 文件导入到您的main.less文件中。

有jasny-bootstrap.less文件，其中包含所有其他文件的导入。您需要以完全相同的顺序将所有这些文件包含到您的 main.less 文件中，但在导入后立即更改任何变量variables.less。

或者只是 import jasny-bootstrap.less，然后将任何更改的变量添加@import "variables.less";到该文件中。

如果我理解正确，您的代码应如下所示：

索引.html：

<head>

  <link rel="stylesheet/less" type="less" href="custom/main.less"/>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>

</head>

正如您在此处看到的没有指向 bootstrap 或 jasny-bootstrap css 的链接，因为我们将其包含在下面的 less 中。

main.less:

@import "bootstrap/bootstrap.less";//jasny requires bootstrap to be included first
@import "jasny-bootstrap/variables.less";//jasny's variables, which we can overwrite below

//your variables go here
@navmenu-width:    225px;

//the rest of jasny less files below

// Core CSS
@import "grid-container-smooth.less";
@import "button-labels.less";
// Components
@import "nav-tab-alignment.less";
@import "navmenu.less";
@import "alerts-fixed.less";
// Components w/ JavaScript
@import "offcanvas.less";
@import "rowlink.less";
@import "fileinput.less";

//more of your own less directives go here
...

如果您已包含jasny-bootstrap.css在您的 html 中，然后您已包含jasny-bootstrap.less在您的 less 中而没有其他 jasny.less文件，这可能是对变量的更改没有覆盖预渲染 CSS 中的定义的原因。

  1. 包括 bootstrap.less
  2. 包括 jasny-bootstrap/variables.less - 定义 jasny 的变量
  3. 用您的值覆盖变量
  4. 包括其余的 jasny 的 less 代码以使用您覆盖的变量并呈现将覆盖默认引导指令的新 CSS 指令。

jasny-bootstrap 源代码以及 .less 文件可以从这里下载： https ://github.com/jasny/bootstrap

于 2014-10-04T17:11:17.640 回答