Twitter bootstrap Laravel 5、自举和更少

我刚刚开始使用Laravel5，我按照这个安装了Bootstrap。这是我第一次接触Laravel，我不熟悉快速响应主题和相关技术

然后我去尝试Laravel框架中的一个模板。我通过仅复制HTML（包括）为其中一个模板的顶部栏创建了一个视图http://mysite/js/bootstrap.js 和http://mysite/css/bootstrap.css 根据指南，但当我在浏览器Firefox上呈现它时，我看到像.navbar header这样的类是从nav.less加载的。我现在确实看到，Laravel5最初提供的文件较少，但它们位于公共目录mysite/resources/assets/Less/bootstrap/之外，因此没有使用它们

所以我的问题是

我链接的那个指南给我的印象是，引导程序并没有随Laravel 5一起提供，但它似乎是较少的版本。如果我想使用Laravel 5附带的bootstrap，我是否应该对mysite/resources/assets/Less/bootstrap/上的文件使用更少的编译器

浏览器中显示的路径mysite/css/less/navbar.less实际上不存在于我的安装中。此外，CSS实际上来自http://mysite/css/bootstrap.css. 浏览器是如何生成mysite/css/less/navbar.less的？看

---

看起来LESS是在启用源代码映射的情况下编译的，而且Chrome Enable CSS源代码映射似乎也处于活动状态。这就是为什么您会看到LESS文件中的实际映射规则。下面的文章解释了它的工作原理以及如何禁用它：

在Firefox中，您可以在开发者工具选项中禁用CSS源代码映射，在“样式编辑器”部分下，取消选中“显示原始源代码”。这里也解释了源映射的工作原理，虽然它使用JS源映射作为示例，但概念是相同的

Laravel附带的引导文件与您下载的CSS文件没有直接连接。在public/css/目录中，您将有一个bootstrap.css文件和一个bootstrap.css.map文件。如果打开bootstrap.css文件，您将看到文件末尾有一行：

/*# sourceMappingURL=bootstrap.css.map */

这会告诉浏览器有一个同名的源映射文件，其中包含从编译的CSS到源代码的映射，源代码是用更少的语言编写的

---

如果您打开bootstrap.css.map，您会看到，虽然大多数文件对于处理映射来说都是乱七八糟的，但在一开始，有一个源路径数组列出了编译后形成css文件的较少文件。这就是浏览器在CSS检查器中读取和显示的内容。它并不真正知道服务器上有什么，它只是从源映射文件知道.navbar头类的规则是在nav.less文件中定义的，然后才编译为CSS。这是为了在编译后更容易找到规则定义。

我正在使用Firefox。这是同一个想法吗？是的，无论浏览器是什么，概念都是一样的。我已经用所需的额外细节更新了我的答案。谢谢！我看到了这个选项，取消选中它将显示css/bootstrap.css中的正确文件。我还看到参考navbar.less的resources/assets/less/bootstrap/bootstrap.less。但是我仍然没有看到css/bootstrap.css之间的联系，这是我单独添加的http://getbootstrap.com 以及参考资料/…上的文件。。。这与拉威尔5号是相关的。这是怎么回事？运行@Amelia提到的任务运行程序gulp会生成css/app.less，但不会生成css/bootstrap.css。我已经用更详细的解释更新了我的答案。非常感谢您提供了一个很棒的答案！Laravel在建造管道时使用的是一种在海湾顶部的方法。安装npm+gulp npm安装-g gulp&&npm安装并运行gulp watch。@Amelia，我遵循了Laravel文档，能够运行Elixir/gulp，它生成css/app.less。但是，它似乎没有被使用？