ASP.NETCoreWebApp如何应用第三方Bootstrap模板-创新互联

这篇文章主要介绍ASP.NET Core Web App如何应用第三方Bootstrap模板，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、网站空间、营销软件、网站建设、浮梁网站维护、网站推广。

引言

作为后端开发来说，前端表示玩不转，我们一般会选择套用一些开源的Bootstrap 模板主题来进行前端设计。那如何套用呢？今天就简单创建一个ASP.NET Core Web MVC 模板项目为例，来应用第三方Bootstrap Template——Admin LTE。

ASP.NET Core Web App如何应用第三方Bootstrap模板

AdminLte Dashboard

1. 创建ASP.NET Core MVC Demo

命令行执行dotnet new mvc -n ApplyBootstrapTemplate，即可创建预置的MVC模板项目。项目结构如下图：

ASP.NET Core Web App如何应用第三方Bootstrap模板

MVC Demo structure

从项目结构来看，我们可以看到wwwroot目录下包含了css、images、js、lib目录，其中lib目录默认引用了bootstrap、jquery相关包。因为是简单的模板项目，所以UI就很将就。

2. 下载AdminLte

目前AdminLte在计划发布AdminLTE 3.0版本，不过现在还处于Alpha版本。我们下载AdminLTE-V2.4.3 (本地下载)来使用。

下载后解压得到的项目结构如下：

ASP.NET Core Web App如何应用第三方Bootstrap模板

AdminLte Structure

3. 替换模板

基于AdminLTE进行开发，仅需要复制dist目录，及其依赖的bower包就可以了。

第一步：我们清空wwwroot下的全部目录（我这边暂时保留了images文件夹，后面会用到）。

第二步：然后复制dist目录到wwwroot下。

其依赖的bower包是安装在bower_components目录下的。我们无需直接复制整个bower_components文件夹，我们复制bower.json包定义文件即可。

第三步：复制AdminLTE下的bower.json到ASP.NET Core Mvc根目录下。

第四步：使用VS2017打开项目后，我们可以看到VS2017已经可以识别到未安装的Bower包。

ASP.NET Core Web App如何应用第三方Bootstrap模板

右键就可以还原bower包。不过先慢着，我们现在还原就会直接还原bower包到根目录下了，并没有还原bower包到wwwroot文件夹下。

第五步：新增.bowerrc文件，配置包安装路径即可。这里我们指定为了wwwroot\plugins。（这里没有指定为wwwroot\bower_components，与原始AdminLTE的目录结构保持一致，是因为如果指定为wwwroot\bower_components，还原包后bower_components默认不会包含在项目中。）

第六步：Restore Package，还原成功后，我们会发现plugins文件夹已包含显示在wwwroot目录下了。

ASP.NET Core Web App如何应用第三方Bootstrap模板