戳戳猫的小窝
更新日志
关于
通过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> ``` 最终首页如下所示： 
添加导航栏