-1

我创建了一个 custom.less 文件。我应该导入哪些文件 (@import) 以开始使用 Bootstrap？

如何开始使用 Bootstrap 和 LESS？找不到教程。。。

4

4 回答 4

2

你只需要几样东西：

  • Bootstrap 的 .css 和 .js 文件
  • less.js 文件
  • jQuery.js

将它们链接到您的网站：

为了帮助优化您的网站，请利用一些已经存在的内容交付网络 (CDN)。以下几行将为您提供引导程序和 jquery。

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>

由于没有 Less CDN，因此您需要在此处下载 less.js 文件，然后通过您的静态媒体将其与您的自定义 .less 文件一起提供：

<script type="text/javascript" src="{{ STATIC_URL }}js/less-1.3.0.min.js"></script>
<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}css/custom.less">
于 2012-10-11T19:14:58.530 回答
1

You can download Bootstrap LESS files from GitHub.

Each files are often named like its corresponding component, check the Bootstrap component's list.

So, you can import files which are necessary for your need.

Hope that helps

于 2012-10-11T16:20:26.177 回答
1

这是我的建议，在你试图让 LESS 用 Bootstrap 编译之前，把那个文件夹放在一边，然后创建一个测试项目来让 LESS 工作。这样开始：

  1. 下载并安装节点
  2. 创建一个名为“less-build”的文件夹只是为了让它工作
  3. 在 Windows 中，shift + 右键单击​​（不确定 mac 是什么）并选择“在此处打开命令窗口”。键入npm install less -g并回车以在您的计算机上“全局”安装 LESS
  4. 现在键入“npm install less”以“本地”安装 LESS。如果一切顺利，您应该会在 less-build 文件夹中看到一个名为“node_modules”的文件夹。如果您单击 node_modules，您将看到一个更少的文件夹。
  5. 接下来，在 less-build 文件夹中创建一个名为 styles.less 的文件。在该文件中添加以下代码：

@backgroundColor: #900;

.block {
  background: @backgroundColor;
}
  1. 保存文件，关闭它。
  2. 现在，再次在命令提示符中键入以下内容：

lessc --compile styles.less > styles.css

  1. 如果一切顺利，您应该会看到文件 styles.css。打开它并确认文件中有有效的 css。

如果可行，请打开 Bootstrap 文件夹并找到 less 文件夹，您将找到一个名为 bootstrap.less 的文件。使用我在 bootstrap.less 上描述的过程。这应该给你一个良好的开端。

于 2012-10-12T04:59:11.927 回答
1

克隆或下载 Twitter Bootstrap 存储库的内容：https ://github.com/twitter/bootstrap/

然后导入less/bootstrap.less，可选less/responsive.less。这样，Twitter Bootstrap 定义的所有 mixin 和变量都可以在您自己的 LESS 文件中使用。

于 2012-10-11T16:39:16.000 回答