如何在 Laravel 7 中正确引入本地 Bootstrap 5.2-php教程-PHP中文网

如何在 Laravel 7 中正确引入本地 Bootstrap 5.2

本文详解在 Laravel 7 项目中通过 public 目录静态资源管理方式，正确引入本地 Bootstrap 5.2 的 CSS 与 JS 文件，解决路径错误导致的样式和脚本失效问题。

本文详解在 laravel 7 项目中通过 `public` 目录静态资源管理方式，正确引入本地 bootstrap 5.2 的 css 与 js 文件，解决路径错误导致的样式和脚本失效问题。

Laravel 的资源加载遵循严格的 Web 根目录约定：所有可通过浏览器直接访问的静态文件（如 CSS、JS、图片等）必须置于 public/ 目录下。你将 Bootstrap 文件放在与 app、config 同级的 bootstrap/ 文件夹中，该路径属于 Laravel 应用结构内部，不对外公开，因此浏览器无法访问，自然导致和 <script> 标签加载失败。</script>

✅ 正确做法是将 Bootstrap 资源归入 public 目录的语义化子目录中，例如：

public/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.min.js

随后，在 Blade 模板（如 resources/views/layouts/app.blade.php）中使用 Laravel 内置的 asset() 辅助函数生成正确的绝对 URL：

Laravel 13.2.0

PHP中文网提供Laravel 13.2.0版本下载，Laravel框架是基于 PHP 8.3+ 的高性能框架，官方推荐通过 Composer 安装。它内置 AI SDK、JSON:API Resources 及原生向量搜索，支持属性驱动开发与队列路由，大幅提升开发效率。相比旧版，13.2.0 优化了缓存 TTL 管理与实时通信，无需 Redis 即可横向扩展。作为现代 Web 开发首选，它兼顾安全与极速体验，助您快速构建企业级应用。

下载

<!-- 引入 Bootstrap CSS -->
<link href="%7B%7B%20asset('css/bootstrap.min.css')%20%7D%7D" rel="stylesheet"><!-- 引入 Bootstrap JS（需确保 jQuery 已加载，Bootstrap 5.2 不再依赖 jQuery，但 Popper.js 是必需的） --><script src="%7B%7B%20asset('js/bootstrap.min.js')%20%7D%7D"></script>

⚠️ 注意事项：

Bootstrap 5.2 移除了对 jQuery 的依赖，但仍需 Popper.js（用于 Tooltip、Dropdown 等组件）。若使用完整版 bootstrap.bundle.min.js（已内置 Popper），请替换为：
```
<script src="%7B%7B%20asset('js/bootstrap.bundle.min.js')%20%7D%7D"></script>
```
确保 public/js/bootstrap.min.js 或 bootstrap.bundle.min.js 文件真实存在且无权限/编码问题；
若使用 bootstrap.min.js（非 bundle 版），请额外引入 Popper（推荐通过 CDN 或本地 public/js/popper.min.js）；
所有 asset() 生成的路径均基于 APP_URL 配置，默认指向 http://localhost:8000/，无需手动拼接域名或 /public/。

完成上述配置后，运行 php artisan serve 并刷新页面，Bootstrap 样式与交互组件即可正常生效。这是 Laravel 官方推荐的静态资源管理方式，兼顾安全性、可维护性与部署一致性。