在 laravel 中使用引导程序答案

【问题标题】：Using bootstrap in laravel在 laravel 中使用引导程序
【发布时间】：2021-05-20 02:03:03
【问题描述】：

我尝试在 Laravel 8 中使用 twitter bootstrap，但是手动之后，bootstrap JS(?) 不起作用。 CSS已加载并且样式可以正常工作，但下拉菜单等不可以。当我点击下拉菜单项时，什么都没有发生。

我做到了：

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

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

但是，当我只插入 CDN 链接时，一切正常。我做错了什么？

我创建了新应用，但遇到了同样的问题。 Laravel v8.28.1，尝试了 5 个 bootstrap/laravel 教程，结果总是一样。

【问题讨论】：

标签： javascript laravel twitter-bootstrap

【解决方案1】：

要遵循的完整教程：（您需要编译 JavaScript）

https://www.positronx.io/how-to-properly-install-and-use-bootstrap-in-laravel/

【讨论】：

是的，这就是我以前做过的，它不起作用。

【解决方案2】：

以下是相同的步骤

安装 Laravel 提供的 Bootstrap 和 Vue 脚手架位于 laravel/ui Composer 包中，可以使用 Composer 安装：

composer require laravel/ui

安装 laravel/ui 包后，您可以使用 ui Artisan 命令安装前端脚手架：

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

在编译 CSS 之前，使用 Node 包管理器 (NPM) 安装项目的前端依赖项：

npm install

使用 npm install 安装依赖项后，您可以使用 Laravel Mix 将 SASS 文件编译为纯 CSS。 npm run dev 命令将处理 webpack.mix.js 文件中的指令。通常，您编译的 CSS 将放在 public/css 目录中：

npm run dev

Laravel 前端脚手架中包含的 webpack.mix.js 文件将编译 resources/sass/app.scss SASS 文件。这个 app.scss 文件导入一个 SASS 变量文件并加载 Bootstrap，它为大多数应用程序提供了一个很好的起点。您可以随意自定义 app.scss 文件，甚至可以通过配置 Laravel Mix 使用完全不同的预处理器。

【讨论】：

【解决方案3】：

好的，我做到了，问题不是 JS，而是引导版本。 Laravel ui bootstrap 安装 4.0 并且 bootstrap 页面上的示例（我复制粘贴的菜单示例）现在专用于 bootstrap 5 beta，其中 data-toggle="dropdown" 已更改为 data-bs-toggle="dropdown" 如我所见。

【讨论】：