使用AdminLTE

最新推荐文章于 2020-02-14 21:38:54 发布

weixin_34037977

最新推荐文章于 2020-02-14 21:38:54 发布

阅读量183

点赞数

文章标签： python

原文链接：https://my.oschina.net/momomo1987/blog/800986

版权

2019独角兽企业重金招聘Python工程师标准>>>

使用AdminLTE

AdminLTE是一个完全响应管理模板。基于Bootstrap3框架，易定制模板。适合多种屏幕分辨率，从小型移动设备到大型台式机。内置了多个页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。最重要的是它是开源免费的，我们可以尽情的使用它。目前的最新版本是2.3.6，可以自行去搜索AdminLTE，官网下载使用。

使用adminlte进行页面布局需要四个主要部分：

.wrapper : 页面的整体框架
.main-header ： logo和顶部导航栏
.sidebar-wrapper ：包含用户面板和侧边导航栏
.content-wrapper ：包含页面和内容主体部分

adminlte有一些用于各种布局的类名，可以将这些类中的每一个添加到dom标签以获得所需的布局效果。

使用 .fixed 固定得到一个固定的头和侧边栏。
使用类.sidebar-collapse 加载时有一个边栏。
使用类 .layout-boxed 得到只有1250px的盒子。
使用类 .layout-top-nav 去除边栏顶部导航栏并在顶部导航栏有链接

将AdminLTE相关核心文件添加至项目

在wwwroot下添加js、css、images三个文件夹。

1 将/AdminLTE-2.3.6/dist/js下的app.js及app.min.js两个文件拷贝至wwwroot/js文件夹下。

2 将/AdminLTE-2.3.6/dist/css下的所有文件拷贝至wwwroot/css文件夹下。

3 将/AdminLTE-2.3.6/dist/img下的所有文件拷贝至wwwroot/images文件夹下。

1.AdminLTE的必要配置文件


<!-- 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.5 --> 
<link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="${ctx}/assets/font/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="${ctx}/assets/font/Hui-iconfont/1.0.7/iconfont.css">
<!-- Theme style -->
<link rel="stylesheet" href="${ctx}/assets/css/AdminLTE.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="${ctx}/assets/css/skins/_all-skins.min.css">

http://www.cnblogs.com/Leo_wl/p/5863201.html

http://www.cnblogs.com/cryst/p/6001364.html

http://caijt.com/2016/01/17/377/

http://www.cnblogs.com/cryst/p/6001364.html

中文版:http://adminlte.la998.com/

转载于:https://my.oschina.net/momomo1987/blog/800986