asp.net core练手小项目(08) - 引入AdminLTE界面库

AdminLTE 是一款基于 Bootstrap 的前端界面库，免费开源。本篇基于上次完成的代码，引入 AdminLTE 界面框架。完成后界面效果如下： AdminLTE 可以从其官网或者 Github 网站下载，有 3.0+ 版和 2.0+ 版，我们选择 3.1.0 版。下载解压后可以通过框架提供的示例来探索用法。在 AdminLTE 目录下，有 index1.html, index2.html 和 index3.html 以及 starter.html 四个文件都可以了解到 AdminLTE 界面的风格。将 AdminLTE 的 dist 文件夹拷贝到 www/libs/adminlte 文件夹下，将 plugins 文件夹下的 fontawesome-free 拷贝到 www/libs/adminlte/plugins 文件夹下。

项目的主界面基于 starter.html 进行修改。在上篇的基础上，改写 _Layout.cshtml 文件。css 连接部分，移除 bootstrap css 样式，引入 adminlte css 样式。 引入 adminlte 所需的 javascript 脚本：

AdminLTE 最重要的作用是处理布局，完成后的 _Layout.cshtml 代码如下：

运行程序，可以看到界面风格已经改变。

源码

源码托管在 gitee 上，https://gitee.com/stonewm/aspnetcore-studentmanagement，为了记录完整的编写过程，重要步骤提交 tag 以方便查看和对比。本次代码 tag 为 v0.08。可以通过 git checkout v0.08 查看到对应代码。