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

How correctly install latest Bootstrap version into my Laravel 5.4 web application?

提问by

I am pretty new in PHPand moreover in Laraveland I have the following problem: I have to correctly install latest BootstrapCSS framework version into my Laravel application.

我对PHP和Laravel 还很陌生，我有以下问题：我必须将最新的BootstrapCSS 框架版本正确安装到我的 Laravel 应用程序中。

Into the Bootstrapdownload page: http://getbootstrap.com/getting-started/#download

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

it says that I can do it using composerby this statment:

它说我可以通过这个声明使用composer来做到这一点：

composer require twbs/bootstrap

So I tryied and I obtained this output in my console:

所以我尝试并在我的控制台中获得了这个输出：

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.

What exactly means the previous output? It has been successful? My doubt is that I can't find the bootstrap.cssfile into the .../resources/assetsdirectory of my project.

之前的输出究竟是什么意思？已经成功了吗？我的疑问是我无法在项目的.../resources/assets目录中找到bootstrap.css文件 。

Why? What am I missing? How can I use Bootstrap into my project?

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

EDIT 1:I saw that Composer have putted BootStrap in this folder:

编辑 1：我看到 Composer 已将 BootStrap 放在此文件夹中：

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

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

So, following this SO link: How to setup bootstrap after downloading via composer?

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

I have tryed to do:

我试图做：

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

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

将 vendor/twbs/dist/css 的内容作为资产公开，但我收到此错误消息：

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.

So it seems that assetstatment doesn't exist.

所以似乎资产报表不存在。

What have I to do?

我该怎么办？

回答by Vaibhavraj Roham

You are importing bootstrap wrong way. Mostly laravel uses composer for pulling server-side libraries. Bootstrap is used for front end basically.

您以错误的方式导入引导程序。大多数 Laravel 使用 composer 来拉取服务器端库。Bootstrap 基本上用于前端。

Laravel By Default Provides Bootstrap for you, see here.

Laravel 默认为您提供 Bootstrap，请参见此处。

Following are the steps which will help you.

以下是对您有所帮助的步骤。

Step 1 : Check Node.js and NPM are installed on your machine.

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

node -v
npm -v

If not installed don't worry here is the link.

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

Step 2 : (Considering you installed node.js) Go to project root folder and execute following command.

第 2 步：（考虑到您安装了 node.js）转到项目根文件夹并执行以下命令。

npm install

this command will download all pre-requisites along with your bootstrap.

此命令将下载所有先决条件以及您的引导程序。

Step 3 : compile the required js files.

第三步：编译需要的js文件。

npm run dev

Step 4 : Add js file to your application.

第 4 步：将 js 文件添加到您的应用程序。

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

That's it!

就是这样！

You can find more hereand here

你可以在这里和这里找到更多

Hope it helps you!

希望对你有帮助！

回答by Abdou Tahiri

If i were you i wouldn't do all of that, after a fresh installation of laravel 5.4 twitter bootstrap come out of the box you just need to load your dependancies using npm .

如果我是你，我不会做所有这些，在全新安装 laravel 5.4 twitter bootstrap 后，你只需要使用 npm 加载你的依赖项。

Install npm dependancies :

安装 npm 依赖项：

npm install 

Then, Implementing Bootstrap into your project is now simple. Open resources/assets/sass/app.scss and see this line:

然后，在您的项目中实施 Bootstrap 现在很简单。打开 resources/assets/sass/app.scss 并看到这一行：

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

now to compile all bootstrap sass files to your public folder public/you should use npm run devor npm run productionif you're in production environnement .

现在将所有引导程序 sass 文件编译到您public/应该使用的公共文件夹中，npm run dev或者npm run production如果您处于生产环境中。

then you have all the Bootstrap styles ready for you to use. That's literally all that is required.

那么你就准备好了所有的 Bootstrap 样式供你使用。从字面上看，这就是所需的全部内容。

回答by Adnan Khan AdDY

****Bootstrap 4 can be easily installed with following steps.****

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

Step 1 — Remove existing bootstrap

步骤 1 — 删除现有的引导程序

Uninstall Bootstrap

卸载引导程序

npm uninstall --save-dev bootstrap-sass

Step 2 — Install Bootstrap 4

第 2 步 - 安装 Bootstrap 4

Install Bootstrap 4 beta and popperjs

安装 Bootstrap 4 beta 和 popperjs

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

Step 3 — Update code references

第 3 步 - 更新代码引用

In resources/assets/js/bootstrap.js replace

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

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

with

和

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

In resources/assets/sass/app.scss replace

在 resources/assets/sass/app.scss 中替换

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

with

和

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

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

In resources/assets/sass/_variable.scss replace

$font-size-base: 14px;

with

和

$font-size-base: 0.875rem;

Step 4 — Recompile AssetsRun

第 4 步 - 重新编译资产运行

npm run dev

Now you have removed all Bootstrap 3 references and installed Bootstrap 4

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

回答by Furqan S. Mahmoud

This worked for me:

这对我有用：

• run php artisan preset bootstrap

• install node.js if not from the official website

  • run npm install

• run npm run dev

• 跑 php artisan preset bootstrap

• 如果不是从官网安装 node.js

  • 跑 npm install

• 跑 npm run dev

---

---

And use these at your HTML:

并在您的 HTML 中使用这些：

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

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