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

引言

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

1. 创建ASP.NET Core MVC Demo

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

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

2. 下载AdminLte

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

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包。

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

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

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

4. 修改_Layout.cshtml

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

主要有以上几个地方需要注意。

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

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

最终效果

CTRL+F5运行效果图如下,至此我们成功完成AdminLTE主题的应用。DEMO已上传到Github

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏wOw的Android小站

[Sublime-Text] Linux下用Sublime-Text3编译输出Java文件

因为现在在借着经典的书籍巩固一些基础知识,所以会经常跑一些简单的程序,可又不想开庞大的IDE。所以就想试着用Sublime-Text来编译程序,哦,当然如果习惯...

11210
来自专栏iOSDevLog

iOS打包framework - Swift完整项目打包Framework,嵌入OC项目使用

--------------------------------打包篇-------------------------------****

20540
来自专栏云知识学习

关于FTP搭建问题

1. 匿名服务器的连接(独立的服务器) 在/etc/vsftpd.conf(或在/etc/vsftpd/vsftpd.conf)配置文件中添加如下几项: A...

801100
来自专栏Vamei实验室

Linux进程基础

计算机实际上可以做的事情实质上非常简单,比如计算两个数的和,再比如在内存中寻找到某个地址等等。这些最基础的计算机动作被称为指令 (instruction)。所谓...

23550
来自专栏FreeBuf

Metasploit、powershell之Windows错误系统配置漏洞实战提权

? 01 引言 我们在获得目标机一个普通的权限时,除了常规提权方法外,还可以通过查找目标主机错误的系统配置和漏洞来获取系统权限。本节所讲的“Trusted S...

349100
来自专栏前端vue

5.登录验证,重定向及访问限制

这里登陆接口的服务端逻辑是在easy-mock中写的 账号:rty 密码:123,只是做一个简单的验证,可以直接调我的接口,也可以自己写验证密码的模拟逻辑,下...

38920
来自专栏Porschev[钟慰]的专栏

Nodejs学习笔记(一)--- 简介及安装Node.js开发环境

学习资料   1.深入浅出Node.js http://www.infoq.com/cn/minibooks/nodejs   2.Node.js开发指南 简介...

37560
来自专栏跟着阿笨一起玩NET

通过SvcUtil.exe生成客户端代码和配置

WCF服务调用通过两种常用的方式:一种是借助代码生成工具SvcUtil.exe或者添加服务引用的方式,一种是通过ChannelFactory直接创建服务代理对象...

10320
来自专栏葡萄城控件技术团队

LeadTools Android 入门教学——运行第一个Android Demo

LeadTools 有很多Windows平台下的Demo,非常全面,但是目前开发手机应用的趋势也越来越明显,LeadTools也给大家提供了10个Android...

21950
来自专栏深度学习之tensorflow实战篇

GO学习之路(二)Go for win10 IDE环境的安装

由于之前一直使用python ,用的是pycharm ,故继续用pycahrm配置GO的IDE Go 是一个开源的编程语言,它能让构造简单、可靠且高效的软件...

35050

扫码关注云+社区

领取腾讯云代金券