Question

我是 PHP 的新手，而且还是 Laravel ，我遇到以下问题：我必须正确安装最新的 Bootstrap CSS框架版本进入我的Laravel应用程序。

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

它表示我可以使用作曲家按照此声明执行此操作：

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.

以前的输出究竟意味着什么？它成功了吗？我怀疑的是，我无法在项目的 ... / resources / assets 目录中找到 bootstrap.css 文件。

为什么呢？我错过了什么？如何将Bootstrap用于我的项目？

编辑1：我看到Composer已将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的内容公开为资产但我收到此错误消息：

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.

所以似乎资产声明并不存在。

我该怎么办？

Answer 1

您正在以错误的方式导入bootstrap。 laravel主要使用composer来提取服务器端库。 Bootstrap基本上用于前端。

Laravel默认为您提供引导程序see here。

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

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

node -v
npm -v

如果没有安装，请不要担心link。

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

npm install

此命令将下载所有先决条件和引导程序。

第3步：编译所需的js文件。

npm run dev

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

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

就是这样！

您可以找到更多here和here

希望它可以帮到你！

Answer 2

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

安装npm dependancies：

npm install

然后，将Bootstrap实现到您的项目中非常简单。打开资源/资产/ sass / app.scss并查看以下行：

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

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

然后您可以使用所有Bootstrap样式。这就是所有必需的。

Answer 3

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

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

卸载Bootstrap

npm uninstall --save-dev bootstrap-sass

第2步-安装Bootstrap 4

安装Bootstrap 4 beta和popperjs

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

第3步-更新代码引用

在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) {}

在资源/资产/sass/app.scss中替换

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

使用

@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

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

3 个答案: