1.AdminLTE
一个基于 bootstrap 的轻量级后台模板，这个前端界面个人感觉很清爽，对于一个大后端的我来说，可以减少较多的时间去承担前端的工作但又必须去独立去完成一个后台系统开发的任务，并且，文档还算比较齐全，对着demo可以完成一个基本的前端框架搭建了。大家如有更为好看的又方便后端上手的前端框架，也可以在留言区分享一下呗。
2
AdminLTE 文档
在线中文Demo：http://adminlte.la998.com/
在线中文文档：http://adminlte.la998.com/documentation/index.html
Github：https://github.com/almasaeed2010/AdminLTE/releases
3.AdminLTE 布局
AdminLTE依赖于两个主要框架：JQ和Bootstrap，其他插件可以按需增加。
从文档可以知道，使用AdminLTE主要有四个部分：
- 包装.wrapper。包裹整个网站的div。
- 主标题.main-header。包含徽标和导航栏。
- 边栏.sidebar-wrapper。包含用户面板和侧边栏菜单。
- 内容.content-wrapper。包含页眉和内容。
在文档中，可以找到下载地址，本文示例是使用最新的版本V2.4.5。
4.Asp.Net Core Razor
新建项目Asp.net Core Web应用程序，默认就是Razor Pages，然后添加相应的模块，如图：本文使用的SDK版本为：dotNet Core 2.1。
5.First
在Asp.Net Core项目中，引用AdminLTE，在wwwroot仅添加如图三个文件夹即可：
- bower_components 基本组件。
- dist adminlte的主要文件。
- plugins 其他插件。
6.Second
在_Layout.cshtml文件中添加引入相关文件：
<!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" href="~/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" href="~/adminlte/bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link href="~/adminlte/bower_components/Ionicons/css/ionicons.min.css" rel="stylesheet" /> <!-- Theme style --> <link rel="stylesheet" href="~/adminlte/dist/css/AdminLTE.min.css"> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link rel="stylesheet" href="~/adminlte/dist/css/skins/_all-skins.min.css"> <!-- Pace style --> <link href="~/adminlte/plugins/pace/pace.min.css" rel="stylesheet" /> <link href="~/css/common.css" rel="stylesheet" /> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
在body中，添加js：
<!-- jQuery 3 --> <script src="~/adminlte/bower_components/jquery/dist/jquery.min.js"></script> <!-- jQuery UI 1.11.4 --> <script src="~/adminlte/bower_components/jquery-ui/jquery-ui.min.js"></script> <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> <script> $.widget.bridge('uibutton', $.ui.button); </script> <!-- Bootstrap 3.3.7 --> <script src="~/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Slimscroll --> <script src="~/adminlte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script> <!-- FastClick --> <script src="~/adminlte/bower_components/fastclick/lib/fastclick.js"></script> <!-- AdminLTE App --> <script src="~/adminlte/dist/js/adminlte.min.js"></script> <!-- Skin --> <script type="text/javascript" src="~/adminlte/dist/js/sidebarskins.js" charset="gbk"></script>
sidebarskins.js是本人汉化的侧边栏皮肤
坑1：一般情况，发现某些功能运行不起来的都是引用不正确导致的，这个要耐心对照好Demo来检查，或者直接用Demo来修改吧。
7.Third
开始使用AdminLTE，这里直接贴图吧，图上有注释和代码折叠比较直观点，重要的地方在放代码。
最后就可以运行项目来预览一下效果了：
坑2：需要注意的是，点击这个小图标
可以实现左侧边栏收缩展开的功能，当只有侧边栏可以正常收缩展开但Logo无动于衷的时候，你可能是少了【sidebar-mini】样式和【logo-mini】logo小图的引用
8添加一个登陆
登录界面写得比较简约，我比较喜欢这种风格。前端写得不多，所以还得前端的女票指导一二，不然就是后端的设计的界面了，你懂的。
在Pages文件夹中，添加一个Razor界面，并撸好界面代码：
@page @model AdminLTE.Net.Web.Pages.LoginModel @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>登录 - AdminLTE.Net.Web</title> <meta name="developer" content="EminemJK"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="~/adminlte/dist/css/AdminLTE.min.css" rel="stylesheet" /> <link href="~/css/login.css" rel="stylesheet" /> </head> <body> <div> <div class="row"> <div class="loginHeader"> <img class="logo-img" src="~/images/banana_logo.ico" /> <h1 class="logo-name">Banana</h1> <div class="clearfix"></div> </div> </div> <div class="row login-bg"> <div class="loginInBox"> @if (!string.IsNullOrEmpty(Model.Message)) { <p class="login-box-msg" style="color:red">@Model.Message</p> } else { <p class="login-box-msg">Sign in to start your session</p> } <form method="post"> <div class="form-group has-feedback"> <input type="text" class="form-control" asp-for="Login.UserName"> <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" asp-for="Login.Password"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <button type="submit" class="btn btn-primary btn-block btn-flat login-btn">Sign In</button> </form> </div> </div> </div> <footer class="footer"> <strong>Copyright © 2018 <a href="http://www.cnblogs.com/EminemJK/">EminemJK</a>.</strong> All rights reserved. </footer> </body> </html>
