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

时间:2022-06-03 11:27:52

引言

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

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

1. 创建ASP.NET Core MVC Demo

命令行执行dotnet new mvc -n ApplyBootstrapTemplate,即可创建预置的MVC模板项目。项目结构如下图:
ASP.NET Core Web App应用第三方Bootstrap模板
从项目结构来看,我们可以看到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模板

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模板

4. 修改_Layout.cshtml

接下来我们将AdminLTE的预置起始页面starter.html移植进我们的布局页面_Layout.cshtml。
我们先来观察一下我们默认的布局页。
ASP.NET Core Web App应用第三方Bootstrap模板
主要有以上几个地方需要注意。

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

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

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

最终效果

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

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

ASP.NET Core Web App应用第三方Bootstrap模板的更多相关文章

  1. Create an ASP.NET Core web app in Visual Studio Code

    https://www.microsoft.com/net/core#windowscmd https://download.microsoft.com/download/B/9/F/B9F1AF57 ...

  2. Azure 部署 Asp.NET Core Web App

    在云计算大行其道的时代,当你在部署一个网站时,第一选择肯定是各式各样的云端服务.那么究竟使用什么样的云端服务才能够以最快捷的方式部署一个 ASP.NET Core 的网站呢?Azure 的 Web A ...

  3. 在 Azure 上部署 Asp.NET Core Web App

    在云计算大行其道的时代,当你要部署一个网站时第一选择肯定是各式各样的云端服务.那么究竟使用什么样的云端服务才能够以最快捷的方式部署一个 ASP.NET Core的网站呢?Azure 的 Web App ...

  4. 给ASP.NET Core Web发布包做减法

    1.引言 紧接上篇:ASP.NET Core Web App应用第三方Bootstrap模板.这一节我们来讲讲如何优化ASP.NET Core Web发布包繁重的问题. 在ASP.NET Core W ...

  5. 【译】使用Jwt身份认证保护 Asp.Net Core Web Api

    原文出自Rui Figueiredo的博客,原文链接<Secure a Web Api in ASP.NET Core> 摘要:这边文章阐述了如何使用 Json Web Token (Jw ...

  6. ASP&period;NET Core Web API下事件驱动型架构的实现(二):事件处理器中对象生命周期的管理

    在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...

  7. 007&period;Adding a view to an ASP&period;NET Core MVC app -- 【在asp&period;net core mvc中添加视图】

    Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing vi ...

  8. &lbrack;译&rsqb;ASP&period;NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了

    [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 本文首发自:博客园 文章地址: https://www.cnblogs.com/yilezhu/p/ ...

  9. C&num;实现多级子目录Zip压缩解压实例 NET4&period;6下的UTC时间转换 &lbrack;译&rsqb;ASP&period;NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp&period;Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp&period;net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 &period;NET Core开发日志

    C#实现多级子目录Zip压缩解压实例 参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩, ...

随机推荐

  1. &lbrack;转&rsqb;Android 5&period;0——Material Design详解(动画篇)

    Material Design:Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,今天跟大家分享一下Material新增的动画: 在Andr ...

  2. Spring Boot开启https

    原文:https://github.com/x113773/testall/issues/1 1. 第一步就是用JDK的keytool工具来创建一个密钥存储(keystore)`keytool -ke ...

  3. 201521123066《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结** 用cont ...

  4. Win 及 Linux 查找mac地址的方法

    1. Windows系统中 - 调出cmd命令行 - 运行Getmac命令.命令行中输入: getmac /v /fo list 并按下回车键 - 查找物理地址.这是MAC地址的另一种描述方式.因为在 ...

  5. 网络通信 --&gt&semi; epoll用法

    epoll用法 在linux的网络编程中,很长的时间都在使用select来做事件触发.在linux新的内核中,有了一种替换它的机制,就是epoll. epoll函数 1. 创建epoll的句柄 siz ...

  6. &lbrack;Luogu 1516&rsqb; 青蛙的约会

    Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事 ...

  7. Tengine安装&lpar;阿里baba的&rpar;-Nginx

    在先前的文章中介绍过Tengine,先前只是使用了运维人员配置好的内容,未自己进行过安装配置.周末闲来无事,对于Tengine进行了尝试性的安装.记录下面方便以后再做改进. Tengine官网上有个非 ...

  8. Class&lowbar;&lowbar;Two

    今天老师要求做查找英文文章中最高频的词  文章用文本储存 import java.io.BufferedReader;import java.io.File;import java.io.FileIn ...

  9. 转:【专题七】UDP编程补充——UDP广播程序的实现

    上次因为时间的关系,所以把上一个专题遗留下的一个问题在本专题中和大家分享下,本专题主要介绍下如何实现UDP广播的程序,下面就直接介绍实现过程和代码以及运行的结果. 一.程序实现 UDP广播程序的实现代 ...

  10. pandas练习(四)--- 应用Apply函数

    探索学生对酒的消费情况 数据见github 步骤1 - 导入必要的库 import pandas as pd import numpy as np 步骤2 - 数据集 path4 = "./ ...