如何在 laravel 8 中安装 bootstrap

问题描述 投票：0回答：7

我在网上可以找到的所有信息都表明您应该通过运行 

composer require laravel/ui
然后运行 
php artisan ui boostrap
来安装 bootstrap。然而，在 Laravel 8 中，
laravel/ui
已被弃用。有没有新的/更好的安装引导程序的方法？

css laravel twitter-bootstrap laravel-8
7个回答
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

现在您可以在带有资产的模板中使用它：

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

我的做法与你提到的类似，即使在 Laravel 8 中也是如此。 所以我相信你走在正确的道路上。

您可以使用此命令创建一个新的 Laravel 项目

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

之后，在laravel文件夹中运行

composer require laravel/ui

如果您只想将引导程序添加到现有项目中，只需运行：

php artisan ui bootstrap
npm install
npm run dev

如果您需要身份验证

php artisan ui bootstrap --auth
6
投票

解决方案1：手动安装bootstrap

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

请参阅此屏幕截图进行下载

2）。重命名下载的 bootstrap 文件夹并将其添加到 Public 文件夹中

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

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

安装引导程序包

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

编译后在终端中看到这个状态

最后，在刀片模板中加载 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”操作

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
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
0
投票

在 Laravel 9 或 10 中安装 Bootstrap

作曲家需要 laravel/ui

php artisan ui 引导程序

php artisan ui bootstrap --auth

npm 安装

npm 运行构建

在项目的头文件中添加以下脚本

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

更多细节：- https://www.vaidikalaya.com/laravel-how-to-install-bootstrap-in-laravel

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.