文章目录
LibMan轻量级包管理器
如果读者已经有一定的开发经验,可能知道很多工具可以和Visual Studio一起安装Bootstrap和JQuery等客户端软件包,比如Bower、NPM和WebPack等。但是,现在我们不会使用这些工具,而是使用Library Manager(LibMan)。LibMan是一个轻量级的客户端库管理工具,它可以从文件系统或内容分发网络(Content Delivery Networ,CDN)下载客户端和框架,支持的CDN包括CDNJS、jsDelivr和unpkg。现在将提取所选库文件,并将其置于ASP.NET Core项目的相应位置。
使用LibMan安装Bootstrap
LibMan安装有命令行CLI和图形化界面GUI两种方式,这是使用图像化界面的方式进行安装。
- 右击解决方案资源管理器中的项目名称,然后选择添加➡客户端库。
- 在打开的添加客户端库窗口中,保留默认提供程序cdnjs。
- 在库文本框中,输入twitter-bootstrap。选择匹配的条目后,它会尝试安装最新版本。当然,读者可以手动输入所需的版本。它有智能提示。我们将目前的最新版本
Bootstrap@4.5.3
。 - 读者可以选择包含所有库文件或特定文件。
- 在目标位置文本框中,指定要将库文件复制到的文件夹路径。默认情况下,我们存放的路径地址为
wwwroot/lib
。 - 单击安装按钮,如图所示。
libman.json文件
libman.json是库管理器清单文件。
请注意,在libman.json
文件中,我们有一个刚刚安装的Bootstrap客户端库列表。我们也可以直接编辑清单文件来安装客户端软件包,而不是使用LibMan提供的图形化界面。
以下是libman.json
中自动生成的代码。
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "twitter-bootstrap@4.5.3",
"destination": "wwwroot/lib/twitter-bootstrap/"
}
]
}
清理和还原客户端库
要清理库文件,请右击libman.json
文件,然后选择清理客户端库,如图所示。
此操作将删除目标文件夹中的所有库文件,但是不会删除libman.json
中已存在的内容。
卸载或更新客户端
卸载或更新客户端库的步骤如下:
- 打开
libman.json
文件。 - 单击要卸载的客户端库,出现一个灯泡💡图标。
- 单击灯泡💡图标,读者可以选择卸载或更新该特定客户端库。
读者也可以删除libman.json
文件中的客户端库列表信息并保存文件,它将卸载相应的客户端库。
同样,要升级或降级客户端库,可以直接更改libman.json
文件中的版本号。保存文件后,相应的客户端库将更新为指定的版本。在Visual Studio中编辑版本号时,还具有智能提示功能。
libman.json文件说明
{
"version": "1.0", //当前的libman文件版本
"defaultProvider": "cdnjs", //默认从哪个CDN网络下载文件
"libraries": [
{
"library": "twitter-bootstrap@4.5.3", //要下载的前端包名称
"destination": "wwwroot/lib/twitter-bootstrap/" //存放库的文件路径地址
},
{
"library":"jquery@3.4.1", //要下载的前端包名称
"destination":"wwwroot/lib/jquery", //存放库的文件路径地址
"provider":"jsdelivr", //针对某个独立的文件,从其他源下载
"files":["dist/jquery.js","dist/jquery.min.js"] //下载该库中特定的文件,而不是下载所有文件
}
]
}
以上代码包含了文件的注释,我相信已经解释得很清楚了。请注意,因为读取的CDN文件是从CDNJS、jsDelivr和unpkg这3个网站下载的,所以可能会收到网速或其他因素的影响。
在网站中自定义CSS样式表
我们将所有特定于站点的CSS放在单独的CSS文件中,将名称为site.css
的样式表添加到css文件夹中。我们已经在wwwroot文件夹中创建了这个CSS文件夹。
复制并粘贴以下代码到site.css文件中。
.btn{
width:75px;
}
在ASP.NET Core应用程序中使用Bootstrap
要在ASP.NET Core应用程序中使用Bootstrap,我们需要在布局文件_Layout.cshtml
中包含对Bootstrap.css文件的引用。当然还要引用自定义样式表site.css
,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" />
<title>@ViewBag.Title</title>
</head>
<body>
<div class="container">
@*添加bootstrap的样式类container*@ @RenderBody()
</div>
@if (IsSectionDefined("Scripts")) { @RenderSection("Scripts",required:false)}
</body>
</html>
请注意,我们使用Bootstrap中的container类属性来定位页面上的元素。
Details.cshtml视图优化
我们使用Bootstrap4中的样式来定位和设置页面上的元素,代码如下。
@model WebApplication12.ViewModels.HomeDetailsViewModel
@{
ViewBag.Title = "学生详情";
}
<h3>@Model.PageTitle</h3>
<div class="row justify-content-center m-3">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<h1>@Model.Student.Name</h1>
</div>
<div class="card-body text-center">
<img class="card-img-top " src="~/images/noimage.png" />
<h4>学生ID : @Model.Student.ID</h4>
<h4> 邮箱 : @Model.Student.Email</h4>
<h4>主修科目 : @Model.Student.Major</h4>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-primary">返回</a>
<a href="#" class="btn btn-primary">编辑</a>
<a href="#" class="btn btn-danger">删除</a>
</div>
</div>
</div>
</div>
@section Scripts{
<script src="~/js/JavaScript.js"></script>
}
Index.cshtml视图优化
Index.cshtml视图优化的代码如下所示:
@model IEnumerable<Student>
@{ ViewBag.Title = "学生列表页面"; }
<div class="card-deck">
@foreach (var student in Model)
{
<div class="card m-3">
<div class="card-header">
<h3 class="card-title">@student.Name</h3>
</div>
<img class="card-img-top" src="~/images/noimage.png" />
<div class="card-body text-center">
<h5 class="card-title">主修科目:@student.Major</h5>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-primary">查看</a>
<a href="#" class="btn btn-primary">编辑</a>
<a href="#" class="btn btn-danger">删除</a>
</div>
</div>
}
</div>
项目目录结构如图所示:
完成后,运行项目。
运行项目后的Index.cshtml
效果如图所示:
Details.cshtml
效果如图所示:
总结
本篇介绍在Visual Studio中使用LibMan管理前端包,结合上篇介绍MVC路由,到此ASP.NET Core的基础内容已经介绍完了。