我应该导入哪些.less文件开始使用Twitter Bootstrap？

Question

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

如何开始使用Bootstrap和LESS？我找不到任何教程......

Answer 1

您只需要几件事：

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

将它们链接到您的网站：

为了帮助优化您的网站，请利用已经存在的一些内容分发网络（CDN）。以下几行将为您提供bootstrap和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>

由于没有较少的CDN，您需要下载less.js文件here，然后通过静态媒体和自定义.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">

Answer 2

您可以从GitHub下载Bootstrap LESS文件。

每个文件通常都被命名为相应的组件，请检查the Bootstrap component's list。

因此，您可以导入您需要的文件。

希望有所帮助

Answer 3

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

然后导入less/bootstrap.less，还可以导入less/responsive.less。有了这个，Twitter Bootstrap定义的所有mixins和变量都可以在你自己的LESS文件中找到。

Answer 4

这是我的建议，在您尝试使用Bootstrap编译LESS之前，只需将该文件夹放在一边并创建一个测试项目以使LESS正常工作。从这样开始：

1. 下载并安装node
2. 创建一个名为“less-build”的文件夹，只是为了让这个工作
3. 在Windows中，shift +右键单击（不确定mac是什么）并选择“打开命令窗口”。键入npm install less -g并按Enter键以在计算机上“全局”安装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上描述的过程。这应该会给你一个良好的开端。