专栏首页圣杰的专栏ASP.NET Core Web App应用第三方Bootstrap模板

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 条评论
登录 后参与评论

相关文章

  • ABP入门系列(17)——使用ABP集成的邮件系统发送邮件

    ABP中对邮件的封装主要集成在Abp.Net.Mail和Abp.Net.Mail.Smtp命名空间下,相应源码在此。 #一、Abp集成的邮件模块是如何实现的 ?...

    圣杰
  • VSTS 执行git pull报错问题修复

    因此我们在执行git pull之前添加一个Command Line指令去执行git config即可,具体配置如下:

    圣杰
  • Azure Web连接到Azure MySql Db

    圣杰
  • 剖析Spring源码:加载IOC容器

    本文接上一篇文章 阅读Spring源码:IOC控制反转前的处理,继续进行下面的分析

    cxuan
  • 量化新视角:工业部门产业联动与周期规律

    工业是国民经济的主导部门,它为经济中的各部门提供能源和原材料、生产工具以 及消费品。过去几十年来,第二产业在我国 GDP 中占比和增速贡献的重要性不言 而喻,市...

    量化投资与机器学习微信公众号
  • 【死磕 Spring】----- IOC 之 IOC 初始化总结

    前面 13 篇博文从源码层次分析了 IOC 整个初始化过程,这篇就这些内容做一个总结将其连贯起来。

    用户1655470
  • 【死磕 Spring】----- IOC 之 IOC 初始化总结

    前面 13 篇博文从源码层次分析了 IOC 整个初始化过程,这篇就这些内容做一个总结将其连贯起来。

    用户1655470
  • Cloudera Manager Server5及Cloudera Manager Agents5命令整理(about云)

    问题导读 1.使用什么命令可以开启、停止、重启Cloudera Manager Server 2.如何强制重启Agents 3.什么情况下适合强制重启Agen...

    用户1410343
  • 魅族跟进,3D深度探测器为何如此受青睐?

    (VRPinea 5月18日讯)5月8日,魅族召开了新品发布会,预热许久的魅族17系列终于正式亮相。除了让人惊艳的晓芳窑“天青”配色,搭载骁龙865处理器,Pr...

    VRPinea
  • 程序员遇到bug后的七种反应

    每一个被bug缠身的程序员,都想拥有孙悟空的本领。要么七十二变,要么一转眼灰飞烟灭 ? 1、谁动了我的代码 ? 这确实是一种曾相识的感觉,我经过无数次的解释都没...

    Java高级架构

扫码关注云+社区

领取腾讯云代金券