php 将引导程序与作曲家一起使用

Use bootstrap with composer

提问by James Ryan

I'm a web newbie programmer,
I'm trying to learn from home to make my own web. I have notions of php, html, js and css.
But I've found something that is not how to solve. I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code

我是一名网络新手程序员，
我正在尝试在家学习制作自己的网络。我有 php、html、js 和 css 的概念。
但我发现了一些无法解决的问题。我正在尝试使用 Composer 来管理 Bootstrap。我安装了 Composer 并运行了这行代码

composer require twbs/bootstrap

that has dropped a folder with files.

删除了一个包含文件的文件夹。

I do not understand is how I make html links to find the js and css files, you should do indicating the full path?

我不明白我是怎么做html链接才能找到js和css文件的，你要不要指明完整路径？

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

Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate

如果问题很愚蠢，请原谅我，但我不知道该如何继续。
对不起，我的英语，我也在学习，但现在我使用谷歌翻译

回答by Jens A. Koch

Yes, Composer downloads the dependencies by default into the vendorfolder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.

是的，Composer 默认将依赖项下载到vendor文件夹中。所以 Bootstrap 也会进入 vendor 文件夹，这不是引用或包含它的正确位置。

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

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

---

---

Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assetsfolder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into publicor public\assets.

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

Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.

请覆盖现有文件，例如，如果文件存在，请删除它，然后复制它。当您需要再次更新 Bootstrap 供应商包时，这允许轻松更新文件。

Of course, you could also just copy the files manually or create a symlink. It depends.

当然，您也可以手动复制文件或创建符号链接。这取决于。

That gives you the following directory structure:

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

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

When the Boostrap assets are copied you can start to include them, in your index.htmlor template (assets\js\bootstrap.min.js, etc.).

复制 Boostrap 资产后，您可以开始将它们包含在您的index.html或 模板中（assets\js\bootstrap.min.js等）。

---

---

Referencing: https://stackoverflow.com/a/34423601/1163786which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.

参考：https: //stackoverflow.com/a/34423601/1163786，其中还显示了此问题的其他解决方案，例如 fxp/composer-asset-plugin、bower、grunt。

回答by Massimiliano Arione

Unless you need customization insidebootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)

除非您需要在引导程序中进行自定义（例如构建 scss），否则最简单的解决方案是依赖 CDN（作为奖励，您可以获得超快速的资产缓存）

So, simply call your assets like so:

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

<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 is a super-excellent tool for backenddependencies, but not the best one for frontend.

Composer 是一款非常优秀的后端依赖工具，但不是前端的最佳工具。

回答by Rahul Shinde

You could use a post update command in the composer.json file:

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

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

And then just include the javascript- and css-files like this:

然后像这样包含 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">

回答by Brian Hellekin

If you want to have the files in your server, and you don't want to use npm, grunt or another frontend library manager, you can simply download the files listed in Massimiliano's answerand put them inside your js/css folders:

如果您想将文件保存在服务器中，并且不想使用 npm、grunt 或其他前端库管理器，您只需下载Massimiliano 的答案中列出的文件并将它们放入您的 js/css 文件夹中：

First download these files (updated to the most recent Bootstrap 3 version):

首先下载这些文件（更新到最新的 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

And put them in these folders (starting from the root of your project):

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

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

Now, you want to be able to call them in the blade templates for your views. It's simple: just add <link>and <script>tags as normal for any css/js file, adding the following to your blade template:

现在，您希望能够在视图的刀片模板中调用它们。很简单：只需像往常一样为任何 css/js 文件添加<link>和<script>标记，将以下内容添加到您的刀片模板：

<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>

P.s.: if you see the console, it shows something as the following error message:

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

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

This will not affect the style of your page, and you can simply ignore this message, or remove a line from the bootstrap file as the answers to this questionsuggest. This answerexplain a bit more.

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