3、使用 Bootstrap 5 美化页面

Laravel 默认使用的是 Tailwind CSS，关于 Tailwind CSS 我们先不管，我们将使用 Bootstrap 5 设计一个属于自己的主页。

1、添加路由

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('home');
});

2、下载模板并替换内容

https://startbootstrap.com/template/blog-home，模板下载成功后把内容解压出来，其内容如下：

$ tree startbootstrap-blog-home-gh-pages/
startbootstrap-blog-home-gh-pages/
├── assets
│   └── favicon.ico
├── css
│   └── styles.css
├── index.html
└── js
    └── scripts.js

把 index.html 的内容复制到 home.blade.php 文件中。内容替换完成后，打开浏览器访问 http://b-laravel11-blog.test/ 就可以看到内容啦。但是没有样式。

3、美化页面

现在，我们需要把 css 和 js 文件夹复制到项目中的 public 目录。

$ tree public/
public/
├── css
│   └── styles.css
├── favicon.ico
├── index.php
├── js
│   └── scripts.js
└── robots.txt

使用 asset() 函数引入样式。

<link href="{{asset('css/styles.css)}}" rel="stylesheet" />

<script src="{{ asset('js/scripts.js') }}"></script>

再次访问 URL，就可以看到美化之后的页面啦。

那为什么要使用 asset 函数呢？查看页面源码就可以发现端倪，内容如下：

<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

<link href="http://b-laravel11-blog.test/css/styles.css" rel="stylesheet" />
<script src="http://b-laravel11-blog.test/js/scripts.js"></script>

这样一看是不是很明显了。

4、了解 public 目录

Laravel 中，public 目录是唯一对外访问的目录，也就是说，我们可以把需要对外访问的资源放到这个目录中。比如我们的 css 和 js，在这个目录中，我们可以使用 asset 函数进行引用。

5、扩展知识

上面的操作方式是最为传统的方式。对于现代化的开发框架来说，如 Vue、Tailwind CSS 等，它们的资源是放在 resources/js 和 resources/css 目录中，当使用 npm run dev 等命令时会自动编译到 public 目录。