如何在我的Laravel 5.4 Web应用程序中正确安装最新版本的Bootstrap？

Question

我对PHP和Laravel都比较新，现在遇到一个问题：我需要将最新版的Bootstrap CSS框架正确地安装到我的Laravel应用程序中。

在Bootstrap下载页面：http://getbootstrap.com/getting-started/#download

上面说可以使用composer通过以下语句完成安装：

composer require twbs/bootstrap

所以我尝试了一下，在我的控制台上获得了这个输出：

Andrea@Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ composer require twbs/bootstrap
Using version ^3.3 for twbs/bootstrap
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing twbs/bootstrap (v3.3.7) Downloading: 100%
Package illuminate/html is abandoned, you should avoid using it. Use laravelcollective/html instead.
Writing lock file
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.

前面的输出具体意味着什么？它成功了吗？我的疑惑是我找不到 bootstrap.css 文件在我项目的 .../resources/assets 目录里。

为什么？我错过了什么？如何在我的项目中使用Bootstrap？

编辑1：我看到Composer已经把Bootstrap放在了这个文件夹里：

.../vendor/twbs/bootstrap/dist/css/bootstrap.css

所以，按照这个SO链接：How to setup bootstrap after downloading via composer?

我尝试去做：

php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css

我想将 vendor/twbs/dist/css 的内容作为资产发布，但收到以下错误信息：

to publich the content of the vendor/twbs/dist/css as an asset but I obtain this error message:

Andrea@Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css


  [Symfony\Component\Console\Exception\CommandNotFoundException]
  There are no commands defined in the "asset" namespace.

看起来资产语句不存在。

我该怎么办？

- user7540582

Answer 1

您正在错误地导入Bootstrap。大多数情况下，Laravel使用Composer来拉取服务器端的库。Bootstrap基本上用于前端。

Laravel默认为您提供了Bootstrap，请参见这里。

以下是可以帮助您的步骤。

步骤1：检查您的计算机上是否安装了Node.js和NPM。

node -v
npm -v

如果未安装，请不用担心，这里是链接。

第二步：（假设您已经安装了 Node.js）进入项目根目录并执行以下命令。

npm install

这个命令将下载所有预备条件和你的引导程序。

步骤三：编译所需的js文件。

npm run dev

步骤四：将JS文件添加到您的应用程序中。

<script src="/js/app.js"></script> (Or it would be already imported)

就是这样！

你可以在这里和这里找到更多信息。

希望对你有所帮助！

- Vaibhavraj Roham

---

好的，我已经完成了，但是bootstrap.css文件在哪里？我该如何将其导入到我的视图中？这样我就可以使用Bootstrap类了... - user7540582

只需将<link href="/css/app.css" rel="stylesheet">添加到头标签中即可。这样就可以导入所有内容了。 - Vaibhavraj Roham

在这里，您可以了解更多有关它的工作原理。 - Vaibhavraj Roham

Answer 2

如果我是你，我不会做那么多事情。在 Laravel 5.4 刚安装完成后，Twitter Bootstrap 就已经自带了。你只需要使用 npm 加载您的依赖项即可。

安装 npm 依赖项：

npm install 

现在，将Bootstrap应用到您的项目中非常简单。打开resources/assets/sass/app.scss文件并查找以下行：

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

现在要将所有的Bootstrap Sass文件编译到您的公共文件夹public/中，您应该使用npm run dev或npm run production（如果您处于生产环境）。

然后，您就可以使用所有的Bootstrap样式了。这就是所需的全部内容。

- Abdou Tahiri

---

我该怎么运行“gulp”？我需要安装它吗？ - user7540582

@abdou-tahir，你不能在Laravel 5.4中使用gulp，因为elixir已被mix所取代。你需要使用$ npm run (dev | production)。 - Vaibhavraj Roham

@VaibhavrajRoham 这个语句到底是做什么的？ - user7540582

@AbdouTahiri 所以在我看来，它将BootStrap .sass编译成“.../public/css/app.css”文件。那么这意味着我可以将此app.css文件导入我的视图并使用Bootstrap类吗？是这样还是我漏掉了什么？ - user7540582

@VaibhavrajRoham 是吗？（前一条评论）。非常感谢。 - user7540582

Answer 3

Bootstrap 4可以通过以下步骤轻松安装。

第一步 - 移除现有的bootstrap

卸载Bootstrap

npm uninstall --save-dev bootstrap-sass

第二步 — 安装Bootstrap 4

安装Bootstrap 4 beta和popperjs。

npm install --save-dev bootstrap@^4.0.0-beta.2 popper.js

第三步 — 更新代码引用

在 resources/assets/js/bootstrap.js 中替换

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
} catch (e) {}

使用

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;
    require('bootstrap');
} catch (e) {}

在资源文件夹下的assets/sass/app.scss中替换：

@import “~bootstrap-sass/assets/stylesheets/bootstrap”

with

@import “~bootstrap/scss/bootstrap.scss”

In resources/assets/sass/_variable.scss replace

$font-size-base: 14px;

使用

$font-size-base: 0.875rem;

步骤4 - 重新编译资源 运行

npm run dev

现在您已经删除了所有的 Bootstrap 3 引用并安装了 Bootstrap 4

- Adnan Khan

Answer 4

这对我有用：

• 运行 php artisan preset bootstrap

• 如果没有安装，从官方网站安装node.js

  • 运行 npm install

• 运行 npm run dev

---

然后在你的HTML中使用它们：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<script src="{{ asset('js/app.js') }}"></script>

- Furqan S. Mahmoud