大佬教程收集整理的这篇文章主要介绍了ASP.NET Core Web App应用第三方Bootstrap模板，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

<h1 id="引言">引言

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

目前AdminLte在计划发布AdminLTE 3.0版本，不过现在还处于Alpha版本。我们来使用。 下载后解压得到的项目结构如下：

title="ASP.NET Core Web App应用第三方Bootstrap模板" alt="ASP.NET Core Web App应用第三方Bootstrap模板" src="https://cn.js-code.com/res/2019/02-08/23/021601aeb5c61baf3abd524f61b42724.png" >

基于AdminLTE进行开发，仅需要复制dist目录，及其依赖的bower包就可以了。 第一步：我们清空wwwroot下的全部目录（我这边暂时保留了images文件夹，后面会用到）。

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

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

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

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

title="ASP.NET Core Web App应用第三方Bootstrap模板" alt="ASP.NET Core Web App应用第三方Bootstrap模板" src="https://cn.js-code.com/res/2019/02-08/23/5f761339e689161caafb216d667a12f3.png"> 右键就可以还原bower包。不过先慢着，我们现在还原就会直接还原bower包到根目录下了，并没有还原bower包到wwwroot文件夹下。

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

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

title="ASP.NET Core Web App应用第三方Bootstrap模板" alt="ASP.NET Core Web App应用第三方Bootstrap模板" src="https://cn.js-code.com/res/2019/02-08/23/ba24273363371573528036ca82555182.png" >

接下来我们将AdminLTE的预置起始页面starter.html移植进我们的布局页面_Layout.cshtml。 我们先来观察一下我们默认的布局页。

title="ASP.NET Core Web App应用第三方Bootstrap模板" alt="ASP.NET Core Web App应用第三方Bootstrap模板" src="https://cn.js-code.com/res/2019/02-08/23/34bae383e8599045a0447aed83a4ce59.png"> 主要有以上几个地方需要注意。

1. 根据环境配置css和js的加载
2. @RenderBody()
3. @RenderSection("Scripts",required: falsE)

我们直接暴力复制starter.html的内容复制粘贴到_Layout.cshtml，然后再将以上三个点进行修改即可。然后修改引用的css、js路径即可。修改后的截图如下：

title="ASP.NET Core Web App应用第三方Bootstrap模板" alt="ASP.NET Core Web App应用第三方Bootstrap模板" src="https://cn.js-code.com/res/2019/02-08/23/b6d4f02056ce5cdcf7ec689bd4eb4a41.png" >

title="ASP.NET Core Web App应用第三方Bootstrap模板" alt="ASP.NET Core Web App应用第三方Bootstrap模板" src="https://cn.js-code.com/res/2019/02-08/23/fdabcc4261c3c3954757170e265bd6cb.png" >

CTRL+F5运行效果图如下，至此我们成功完成AdminLTE主题的应用。DEMO已上传到https://github.com/yanshengjie/ApplyBootstrapTheme">Github。

title="ASP.NET Core Web App应用第三方Bootstrap模板" alt="ASP.NET Core Web App应用第三方Bootstrap模板" src="https://cn.js-code.com/res/2019/02-08/23/109dce7b10f0d129975037e4102906b8.png">

大佬总结

以上是大佬教程为你收集整理的ASP.NET Core Web App应用第三方Bootstrap模板全部内容，希望文章能够帮你解决ASP.NET Core Web App应用第三方Bootstrap模板所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。