未在 Laravel 8 中加载引导程序答案

【问题标题】：Not loading bootstrap in Laravel 8未在 Laravel 8 中加载引导程序
【发布时间】：2021-04-24 07:11:25
【问题描述】：

我刚开始使用 Laravel 8，由于我的页面没有加载引导程序，如何在 Laravel 8 中包含引导程序？

在这种情况下，它不会加载具有正确样式的列表组。

@extends('layouts. app')

@section('content')
    <h1>{{ $title ?? '' }}</h1>
    
    <ul class="list-group">
       <li class="list-group-item">Web design</li>
       <li class="list-group-item">programming</li>
       <li class="list-group-item">SEO</li>
    </ul>
@endsection

【问题讨论】：

你把bootstrap.css文件放在哪里了？调试你的浏览器控制台..
Welcome to SO .. laravel 8 没有自带 bootstrap 所以你需要手动添加 bootstrap laravel.com/docs/8.x/frontend
我找不到 bootstrap.css
在 larave 8 的文档中没有关于前端脚手架的文件，我假设 mix 已经取代了一切？
@waithira mix 不适用于脚手架。有两个包用于 Laravel、Laravel UI 和 Jetstream 的脚手架。 Jetstream 没有开箱即用的 Bootstrap，因此您必须使用 github.com/nascent-africa/jetstrap 为 Bootstrap 交换 tailwindCss 资源

标签： laravel

【解决方案1】：

要在 Laravel 8 中安装 Bootstrap 4，然后安装以下 Laravel UI composer 包以获取命令：

composer require laravel/ui

成功安装以上包后，我们就可以开始安装 Bootstrap了。

有两种方法可以做到这一点，一种是简单的 Bootstrap 设置安装，另一种是使用身份验证安装 Bootstrap。

安装引导程序 4：

php artisan ui bootstrap

使用身份验证安装 Bootstrap 4

php artisan ui bootstrap --auth

现在你可以看到你的资源目录JS文件夹了。

你还需要安装 npm 并运行它：

npm install

然后，运行 NPM

npm run dev

现在您可以使用 Bootstrap 4 应用了。

您可以使用它，包括 Blade 模板标题中的这些行：

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

问候

【讨论】：

【解决方案2】：

如果你想在 laravel 8 中安装引导程序安装

composer require laravel/ui

然后是否使用身份验证安装引导程序

php artisan ui bootstrap (--auth)

之后你需要写

npm install && npm run dev

与 laravel 7 相同的步骤

一切顺利

【讨论】：

【解决方案3】：

最简单的方法

从@extends('layouts. app') 到@extends('layouts.app') 删除空格

然后把这行放到resource\view\layouts\app.blade.php

<script src="{{asset('bootstrap/js/bootstrap.bundle.min.js')}}"></script>

并将此文件直接放入公用文件夹bootstrap

【讨论】：

【解决方案4】：

我跑了作曲家需要 laravel/ui

那么 php artisan ui 引导

然后 npm install 和 npm run dev

【讨论】：

Laravel 8 正在放弃 Laravel UI 那么为什么不使用 Laravel Jetstream，上周我发现自己处于这个确切位置，这导致我创建了这个包：github.com/nascent-africa/jetstrap。它将 Jetstream tailwindCSS 资源转换为 Bootstrap 5 或 4。解决您的问题。
所以新的前端样式不是 bootstrap 而是 tailwaind css？我看到 jetstream 仅用于身份验证脚手架？
Jetstream 不仅仅用于身份验证，它的功能还不止于此，是的，它在 tailwindCSS 中。

【解决方案5】：

Laravel 8 正在放弃引导程序并实现顺风 CSS。

我推荐学习和使用tailwind css。

这可以通过以下方式轻松安装：

npm install

npm install -D tailwindcss

npx tailwindcss init

Laravel Tailwind CSS docs

Tailwind CSS

【讨论】：

OP 并未要求提供 bootstrap 的替代方案，而是要求提供 bootstrap CSS 的说明。

【解决方案6】：

当您从头开始构建网站时，我使用的是旧方法并且有效，我使用了 laravel 的公共文件夹中的 bootstrap.min.css、bootstrap.min.js 和 jquery 文件，并将这些文件链接到 index.blade。 php

<script src="{{ asset('js/jqueryv3_9_0.js') }}" defer></script>
<script src="{{ asset('js/bootstrap.mini.js') }}" defer></script>
<link href="{{ asset('css/bootstrap.mini.css') }}" rel="stylesheet">

【讨论】：

您的问题中缺少代码