asp.net core练手小项目(06) - 使用 bootstrap

HTML 原生的标签界面渲染比较难看，本篇讲解如何引入前端 bootstrap 前端框架让界面更加美观。Bootstrap 来自 Twitter，是目前最受欢迎的前端框架 Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。不需要托管到服务器，可以直接在任何 HTML 页面引用后直接运行。

LibMan: 客户端包管理器

LibMan 是 Library Manager 的简称，支持从 CDN (Content Delivery Network) 将前端库下载到项目中，或者从本地文件系统中将前端库拷贝到项目中，还支持对前端的库进行升级或者移除，比手工处理高效便捷。

前端库按照约定放在 wwwroot 文件夹下。我们在项目中首先创建 wwwroot 文件夹，在 wwwroot 中创建 libs 子文件夹，用鼠标选中 libs 文件夹，从右键菜单中选择 Add 菜单，添加 Client-Side Library：

在弹出的对话框中，引入 twitter-bootstrap，使用 4.6.0 版本：

点击 Install 按钮后，visual studio 从指定的 CDN 将前端库文件下载到项目指定的位置，并且添加了一个 libman.json 文件。我们可以利用 libman.json 文件对前端库文件进行升级、降级、卸载、删除等操作。

比如进行版本管理：

右键选择 libman.json，可以删除客户端库等：

在 asp core 中使用 Bootstrap

在 Asp.Net Core 中使用 Bootstrap，需要在页面视图文件中引用 bootstrap的样式表 CSS，因为 Bootstrap 依赖 jQuery，所以还需要 jquery javascript 文件。我们将 bootstrap css 文件和 jQuery 库文件都引入到 _Layout.cshtml 文件，从而实现其它页面视图的共享：

然后在 _Layout.cshtml 中使用 bootstrap 的导航组件：

以 index.cshtml 文件为例，将 table 的 class 属性设置为 bootstrap 的 table:

应用了 bootstrap 后的界面如下：

对 Detail.cshtml，使用 bootstrap 的 Card 组件：

使用了 Card 组件后的界面效果：

源码

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

如果需要查看 v0.05 到 v0.06 做了哪些改变，推荐在 Visual Studio Code 中安装 GitLens 插件。安装之后，通过 Compare Working Tree with <branch, tag, or refs> 选择分支(branch) 或者标签(tag)进行比较。

比如，我们选择 tag v0.05。显示共有 21 个文件修改。左边的图示非常清晰的显示了哪些文件被删除，哪些文件是新增的，哪些文件做了修改。

我们选择 Index.cshtml 文件，查看修改的地方，非常清晰：