使用Composer集成Bootstrap

Question

我是一名网络新手程序员，
我正在尝试在家学习制作自己的网站。 我有php、html、js和css的基本概念。
但我遇到了一个问题，就是如何使用Composer来管理Bootstrap。 我已经安装了Composer并运行了这行代码。

composer require twbs/bootstrap

已经放置了一个文件夹，其中包含文件。

我不明白的是如何制作HTML链接以查找JS和CSS文件，您应该指定完整路径吗？

vendor / twbs / bootstrap / dist / js / bootstrap.js

如果问题很蠢，请原谅，我不知道该如何继续。
还请原谅我的英语，我也在学习，但目前我只会使用Google翻译。

- James Ryan

---

你想要使用Bootstrap Sass来使用Bootstrap吗？ - user5778346

Answer 1

您可以在composer.json文件中使用post-update命令：

"scripts": {
        "post-update-cmd": [
            "rm -rf public/bootstrap",
            "cp -R vendor/twbs/bootstrap/dist public/bootstrap"
        ]
    }

然后只需像这样包含javascript和css文件：

<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">

- Rahul Shinde

---

好的，为了确保，您需要首先创建public/bootstrap文件夹或者尝试不带“rm”命令的bootstrap脚本。然后，在包含脚本时，您只需添加href="/public/bootstrap/css/bootsrtap.min.css"和src和js脚本相同即可。这是我能找到的最好的答案！ - Boky

src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"当使用域名时，您可以将{{ ROOT_URL }}替换为斜杠。 - Wolfgang Blessen

Answer 2

是的，Composer默认会将依赖项下载到vendor文件夹中。因此，Bootstrap也会出现在vendor文件夹中，这不是引用或包含它的正确位置。

composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js

---

您的下一步是编写一个小助手脚本，将所需的Bootstrap文件复制到public/assets文件夹中。您可以将完整的dist文件夹（包括子文件夹）(vendor\twbs\bootstrap\dist)复制到public或public\assets中。

请覆盖现有文件，例如，如果存在文件，则先删除再复制。这样，当您需要再次更新Bootstrap供应商包时，就可以轻松更新文件。

当然，您也可以手动复制文件或创建符号链接。具体情况而定。

这将为您提供以下目录结构：

public
 \- assets
    |- css
    |- js
    \- fonts
 \- index.html

当Bootstrap资源被复制后，您可以开始在index.html或模板(assets\js\bootstrap.min.js等)中引用它们。

---

参考：https://dev59.com/81sW5IYBdhLWcg3w-rIA#34423601，其中还展示了其他解决此问题的方法，例如fxp/composer-asset-plugin，bower，grunt。

- Jens A. Koch

---

作曲家的想法是什么？它是一个PHP包管理器，用于下载Bootstrap（前端CSS库）到一个需要使用脚本复制到另一个地方的位置。 - Adelin

Bootstrap是一个前端依赖项，应该由“前端包管理器”进行管理。如果使用Composer，则前端包会落在后端文件夹（vendor）中，这可能不是一个Web服务的文件夹（不是public_html）。因此，可能需要复制！ - Jens A. Koch

不需要将它们复制到另一个路径，只需在头文件中包含这些文件即可。 - Bayron Vazquez

Answer 3

除非您需要在 Bootstrap 内进行自定义（例如构建 SCSS），最简单的解决方案是依赖 CDN（作为奖励，您将获得超快速的资产缓存）。

因此，只需这样调用您的资产：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Composer 是一个用于后端依赖管理的超级好用的工具，但并不是最适合前端的。

- Massimiliano Arione

---

这不是回答主要问题。 - LucileDT

Answer 4

如果你想在你的服务器上拥有这些文件，而且不想使用npm、grunt或其他前端库管理工具，你可以简单地下载Massimiliano's answer中列出的文件，并将它们放入你的js/css文件夹中：

首先下载这些文件（更新到最新的Bootstrap 3版本）：

http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

并将它们放入这些文件夹中（从您的项目根目录开始）：

public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js

现在，你想要能够在 Blade 模板中调用它们。很简单：只需像其他 css/js 文件一样添加 <link> 和 <script> 标签，并将以下内容添加到你的 Blade 模板中：

<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>

附注：如果您看到控制台，它会显示以下错误消息：

Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map

这不会影响您页面的样式，您可以简单地忽略此消息，或者按照此问题的答案建议从引导文件中删除一行。此答案解释得更详细。

- Brian Hellekin

---

虽然提问者直接询问如何使用composer与bootstrap，但您基本上将问题转化为一个非常初学者的问题，即如何在HTML页面中包含CSS，这是存在的最基本的Web开发问题之一，除了公共文档根路径已经有两次回答之外，但他们也提到了如何包含它。您还引用了3个链接，其中一个是本地问题，另外两个问题与此相当无关。我意识到您帮助的努力，但我认为其他问题不属于这个问题。 - FantomX1