hi，我是温馨，一名PHPer

与时俱进

Laravel 环境说明：Laravel9.2

Laravel9.2 开始已经使用 Vite 作为前端资源打包。按照以往的方式使用 bootstrap 时，会发现 bootstrap 样式并没有生效，而是默认使用了 Tailwind CSS样式。

本篇文章就记录，使用Vite 在 Laravel9.2x 中安装使用 bootstrap5 样式。

第一步：创建项目

<span style="color: rgb(255, 192, 0);">composer create-project  laravel/laravel la9_bootstrap</span><br></br>

第二步：安装 Laravel UI

<span style="color: rgb(255, 192, 0);">composer require laravel/ui</span><br></br>

第三步：使用 bootstrap5

<span style="color: rgb(255, 192, 0);">php artisan ui bootstrap --auth</span><br></br>

若不需要使用 auth 系统，可以直接安装 php artisan ui bootstrap

第四步：vite.config.js 中导入 bootstrap5

这一步骤中，需要修改 vite.coffig.js 配置文件并删除 resources/css/app.css

修改前： vite.config.js

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> { <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defineConfig</span> } <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'vite'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">laravel</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'laravel-vite-plugin'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">export</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">default</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defineConfig</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">plugins</span>: [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">laravel</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/css/app.css'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ]),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">});</span>

【使用此处配置】修改后：vite.config.js

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> { <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defineConfig</span> } <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'vite'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">laravel</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'laravel-vite-plugin'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">path</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'path'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">export</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">default</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defineConfig</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">plugins</span>: [</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">laravel</span>([</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        ]),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    ],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">resolve</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">alias</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'~bootstrap'</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">path</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">resolve</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__dirname</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'node_modules/bootstrap'</span>),</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">});</span>

第五步：在 js 中导入 bootstrap5 SCSS

这一步中，需要在 resources/js/app.js 或 resources/js/bootstrap.js 中导入 bootstrap。

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// resources/js/app.js</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./bootstrap'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'../sass/app.scss'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">import</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">*</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">as</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">bootstrap</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'bootstrap'</span></span>

第六步：使用 @vite 替换 mix()

使用 Vite 进行管理时，需要使用 @vite 模板指令替换 mix()助手函数。

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 将下面 2行替换成</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rel</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"stylesheet"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ mix('css/app.css') }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">src</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ mix('js/app.js') }}"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defer</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 替换为</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@vite</span>([<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>])</span>

下面就在 app.blade.php 模板文件中进行替换：

views/layouts/app.blade.php

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">doctype</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">html</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">lang</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ str_replace('_', '-', app()->getLocale()) }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">head</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">charset</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"utf-8"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">CSRF</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Token</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"csrf-token"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ csrf_token() }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span>{{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">config</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'app.name'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Laravel'</span>) }}<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">title</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Scripts</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@vite</span>([<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>])</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{{<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">src</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ asset('js/app.js') }}"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">defer</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">script</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--</span>}}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Fonts</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rel</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"dns-prefetch"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"//fonts.gstatic.com"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"https://fonts.googleapis.com/css?family=Nunito"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rel</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"stylesheet"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Styles</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {{<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ asset('css/app.css') }}"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">rel</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"stylesheet"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--</span>}}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">head</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">body</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"app"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">nav</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbar navbar-expand-md navbar-light bg-white shadow-sm"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"container"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbar-brand"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ url('/') }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">config</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'app.name'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Laravel'</span>) }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">button</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbar-toggler"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">type</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"button"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">data</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">bs</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">toggle</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"collapse"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">data</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">bs</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">target</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"#navbarSupportedContent"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">aria</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">controls</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbarSupportedContent"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">aria</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">expanded</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"false"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">aria</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">label</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ __('Toggle navigation') }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbar-toggler-icon"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">span</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">button</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"collapse navbar-collapse"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbarSupportedContent"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Left</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Side</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Of</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Navbar</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">ul</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbar-nav me-auto"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">ul</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Right</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Side</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Of</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Navbar</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">ul</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbar-nav ms-auto"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Authentication</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Links</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@guest</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@if</span> (<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">has</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'login'</span>))</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">li</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"nav-item"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"nav-link"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('login') }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span>{{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Login'</span>) }}<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">li</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@endif</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@if</span> (<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">has</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'register'</span>))</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">li</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"nav-item"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"nav-link"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('register') }}"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span>{{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Register'</span>) }}<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">li</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@endif</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@else</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">li</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"nav-item dropdown"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbarDropdown"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"nav-link dropdown-toggle"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"#"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">role</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"button"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">data</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">bs</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">toggle</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"dropdown"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">aria</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">haspopup</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"true"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">aria</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">expanded</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"false"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">v</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">pre</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Auth</span>::<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">user</span>()<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span> }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"dropdown-menu dropdown-menu-end"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">aria</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">labelledby</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"navbarDropdown"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"dropdown-item"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">href</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('logout') }}"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                   <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">onclick</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"event.preventDefault();</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                                     <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">document.getElementById('logout-form').submit();"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    {{ <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">__</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Logout'</span>) }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">a</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"logout-form"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">action</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"{{ route('logout') }}"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">method</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"POST"</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"d-none"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@csrf</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">form</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">li</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@endguest</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">ul</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">nav</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">main</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">class</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"py-4"</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">@yield</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'content'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">main</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">div</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">body</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

第七步：编译运行

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">npm</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">install</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">npm</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">run</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">build</span></span>

这样就可以咯，开始使用 bootstrap 样式吧。