在laravel中使用bootstrap

Question

我尝试在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教程，结果总是一样的。

Answer 1

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

Answer 2

完整的教程如下：(你需要编译JavaScript)

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

Answer 3

对于相同的情况，以下是相同的步骤

安装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 package manager (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文件将编译资源/ SASS /app.scss SASS文件。此app.scss文件导入SASS变量文件并加载Bootstrap，这为大多数应用程序提供了一个很好的起点。您可以随意定制app.scss文件，甚至可以通过配置Laravel Mix来使用完全不同的预处理器。