时间戳

首页 > 解决方案 > Laravel CSS 和 Bootstrap 不起作用

php - Laravel CSS 和 Bootstrap 不起作用

问题描述

我创建了一个新的 Laravel 项目并下载了 bootstrap CSS 和 JS 文件，并将 CSS 文件放在 resources/css 中，并将 bootstrap 和 popper 的 JS 文件以及 jQuery 放在 resources/js 和 welcome.blade.php 我链接了 CSS 文件和这样的JS文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Osama The Coder</title>
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>

<body>
    <section class="text-danger">
        Hello World
    </section>

    <script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ asset('js/popper.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>

</html>

当我打开项目时，它只是没有任何样式或 Bootstrap 字体系列的文本，即使我链接了 app.css 并将红色应用于部分元素，我也没有看到任何变化

标签： phplaravelbackend

解决方案

请按照以下步骤

  1. 将所有静态资产放在公共目录中

  2. 将资产组织在不同的文件夹中，例如 public/js 用于 js 相关文件，public/css 用于 css 相关文件

  3. 然后使用下面的辅助方法访问您的文件

    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
/* or js files */
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>

推荐阅读