添加导航栏

通过nav标签及bulma的navbar类可以设置导航栏。

在导航栏中可以设置导航栏的标题和菜单，分别为navbar-brand和navbar-menu。

在菜单中可以设置靠左的菜单和靠右的菜单，其中靠左的菜单为navbar-start。

最终代码如下：

<nav class="navbar is-info p-2">
    <div class="navbar-brand">
        <a asp-controller="Home" asp-action="Index" class="navbar-item"><p class="title">学生信息管理系统</p></a>
    </div>        
    <div class="navbar-menu">
        <div class="navbar-start">
            <a asp-controller="Major" asp-action="Index" class="navbar-item">专业管理</a>
        </div>
    </div>
</nav>

in-info表示将导航栏的颜色设置为蓝色，也可以设置为其他颜色。p-2设置导航栏的内边距为0.5rem。

在navbar-brand中，我们将首页放入其中，通过navbar-item使其称为一个导航栏项。

在菜单栏中，目前只设置了靠左的菜单，并且由于目前只完成了一个模块，因此我们将此模块的首页放到菜单栏中。

当然，为了方便，可以提前将其他模块的首页也添加进来，代码如下：

<a asp-controller="Grade" asp-action="Index" class="navbar-item">年级管理</a>
<a asp-controller="Class" asp-action="Index" class="navbar-item">班级管理</a>
<a asp-controller="Student" asp-action="Index" class="navbar-item">学生管理</a>

最后，还可以给RenderBody外的div一个内边距，可以设置class="p-6"，表示内边距为3rem。

最终，布局文件中的代码如下所示：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/bulma/bulma.css" rel="stylesheet" />
    <script src="~/sweetalert2.all.js"></script>
    <script src="~/htmx.js"></script>
</head>
<body>
    <nav class="navbar is-info p-2">
        <div class="navbar-brand">
            <a asp-controller="Home" asp-action="Index" class="navbar-item"><p class="title">学生信息管理系统</p></a>
        </div>        
        <div class="navbar-menu">
            <div class="navbar-start">
                <a asp-controller="Major" asp-action="Index" class="navbar-item">专业管理</a>
                <a asp-controller="Grade" asp-action="Index" class="navbar-item">年级管理</a>
                <a asp-controller="Class" asp-action="Index" class="navbar-item">班级管理</a>
                <a asp-controller="Student" asp-action="Index" class="navbar-item">学生管理</a>
            </div>
        </div>
    </nav>
    <div class="p-6">
        @RenderBody()
    </div>
    @await RenderSectionAsync("Scripts", false)
</body>
</html>

最终首页如下所示：

image-20240817230111032