logo标签列表

如何在 Laravel 8 中安装 Bootstrap？

csslaraveltwitter-bootstraplaravel-8
18

我在网上找到的所有信息都说你应该通过运行composer require laravel/ui，然后php artisan ui boostrap来安装bootstrap。然而，在Laravel 8中，laravel/ui已被弃用。是否有一种新的/更好的安装bootstrap的方法？

Laravel Breeze 是最接近 Laravel UI 后端的包，但它是使用 TailwindCSS 构建的。一种选择可能是使用 Breeze，自己安装 Bootstrap，然后从 UI 复制 blade 文件。不过我不能百分之百确定这样做是否会完美运行，可能需要进行适当的调整。 - Rwd
是的，laravel/ui已经被弃用了，请查看https://github.com/laravel/ui自述文件中的第一个注意事项！Breeze/tailwind... - bcag2
6个回答
42

您可以手动安装Bootstrap并编译Sass。

首先，使用编译器将其添加到npm中：

npm install bootstrap
npm install sass
npm install sass-loader

第二步，创建（如果没有创建）resources/sass/app.scss 并添加以下内容：

@import '~bootstrap';

第三步，在 webpack.mix.js 中添加编译:

mix.sass('resources/sass/app.scss', 'public/css')

然后，使用 npm run dev 编译 - 你会看到编译好的文件 public/css/app.css

现在你可以在模板中通过 asset 使用它：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
1
谢谢！正是我所需要的。 - MrSandyWilly
1
有没有文档可以找到这个？我是 Laravel 的初学者，我想看看详细的内容，因为这对我来说有点神奇哈哈。我真的不太明白它是如何工作的。 - Elias
它能正常工作，谢谢。 - sumanta.k
当我运行npm run dev时，它无法正常工作。出现错误“mix：未找到”。 - Mr.Developer
我认为这是因为您使用了 Laravel 9 和 Vite。您可以安装 Laravel Mix 或尝试搜索 Laravel Vite Bootstrap。 - Maksim
我使用“npm install laravel-mix@latest”命令进行了修复。 - Mr.Developer
15

我做的方式类似于你提到的，甚至在Laravel 8中也是如此。 所以我相信你走在了正确的路上。

你可以使用这个命令创建一个新的Laravel项目

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

然后，在 Laravel 文件夹中运行

composer require laravel/ui

如果你只是想将Bootstrap添加到现有项目中，只需运行:

php artisan ui bootstrap
npm install
npm run dev

如果您需要进行身份验证

php artisan ui bootstrap --auth
这在 Laravel 8x 中不起作用。它会抛出错误 php artisan ui bootstrap。 - Kennedy Owusu
2
@KennedyOwusu 首先运行 composer require laravel/ui。 - user4370090
5

解决方案1：手动安装Bootstrap

1). 从 Bootstrap 网站下载 Bootstrap 的源文件：https://getbootstrap.com/docs/5.1/getting-started/download/

请参考此截图进行下载 enter image description here

2). 将下载的 Bootstrap 文件夹重命名并添加到 Public 文件夹中。 enter image description here

3). 在您的文件/视图中加载 Bootstrap 文件。

enter image description here

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="{{asset('bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
       
    <!-- Bootstrap Bundle with Popper -->
    <script src="{{asset('bootstrap/js/bootstrap.bundle.min.js')}}"></script>

    <title>Hello, world!</title>
    <button class="btn btn-primary">Bootstrap btn</button>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

解决方案2：使用包管理器安装Bootstrap

创建 Laravel 项目

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

选择项目文件夹

cd laravel-bootstrap

在 Laravel 中安装 Bootstrap

php artisan ui bootstrap

安装Bootstrap包

npm -v

最后，安装bootstrap包和相关的前端依赖项，例如jquery。
npm install

编译资源

对于SCSS：打开resources / sass文件夹中的app.scss文件，并添加以下行

@import 'variables';
@import '~bootstrap/scss/bootstrap';

对于CSS：打开resources/css文件夹中的app.css文件并添加以下行
@import 'variables';
@import '~bootstrap/css/bootstrap';

运行下面的命令进行资产编译

for development: npm run dev
for production: npm run production

自动化SASS或CSS和JS更改

如果您懒得每次在SASS/CSS和JS文件中进行更改时都运行npm run dev命令，那么您应该使用以下命令。

npm run watch

编译后在终端中查看此状态

enter image description here

最后，在您的Blade模板中加载CSS和JS文件

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>
2

composer require laravel/ui
php artisan ui bootstrap
npm install
npm run dev

如果您没有看到Laravel Mix成功编译，请查阅Mix文档页面 "https://laravel-mix.com/docs/6.0/installation"。

这并不是对问题的答案。一旦你获得足够的声望，你就能够在任何帖子中评论; 相反，提供那些不需要询问者澄清的答案。- 来自审核 - Akshay
1

Windows 10

Laravel v9.17.0

PHP v8.1.6

composer create-project laravel/laravel <project>
cd <project>
composer req laravel/ui
php artisan ui bootstrap --auth
npm install bootstrap
npm install sass
npm install sass-loader
npm install && npm run dev
如果您想要使用Fortify进行身份验证、MFA和其他身份验证功能，那么在第4步中只需执行php artisan ui bootstrap即可。请注意，根据文档[docs]（https://laravel.com/docs/9.x/fortify#authentication），您需要创建所有必需的视图。 - avn
0

composer req laravel/ui:* 将解决以下问题

Problem 1
    - Root composer.json requires laravel/ui ^4.0 -> satisfiable by laravel/ui[v4.0.0, v4.0.1, v4.0.2, 4.x-dev].
    - laravel/ui[v4.0.0, ..., 4.x-dev] require illuminate/console ^9.21 -> found illuminate/console[v9.21.0, ..., 9.x-dev] but these were not loaded, likely because it conflicts with another require.

当你将 Laravel 和 Composer 更新到最新版本并尝试安装先前的版本时，可能会出现上述问题。因此，您需要执行以下命令以获取支持的软件包版本

composer req laravel/ui:*
php artisan ui bootstrap
npm install
npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
npm install sass-loader@^12.1.0 sass resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
npm run dev
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接