先介绍一下AdminLTE的官方网站:AdminLTE官方网站 和GitHub:AdminLTE的github,可以在上面自行下载。

AdminLTE 是一个完全响应管理模板,主要依赖于 Bootstrap 3、jQuery 1.11+ 这两个框架,插件中使用的基本都是Bootstrap和jQquery插件。

AdminLTE自带JQuery和Bootstrap3框架,所以不需要再另外下载。

starter.html是 AdminLTE 建议用来作为起点的参考示例,在此基础上做开发会快很多,build目录中包含未编译过的JS,CSS文件,dist目录中包含编译过的JS,CSS文件,还提供了很多压缩版本,plugins目录中存放依赖第三方插件的CSS和JS文件,pages页面下就是一些页面。

  常用类:

    1. Layout

      .wrapper //将页面上的元素都包裹其中

      .main-header //header,包含logo和navbar

      .main-sidebar//aside,sidebar菜单

      .content-wrapper //div,主体

    2.navbar

      .navbar-static-top //滚动

      .navbar-fixed-top //固定

      .navbar-fixed-bottom //固定

  

|---------------------------------------------------------|
| SKINS | skin-blue |
| | skin-black |
| | skin-purple |
| | skin-yellow |
| | skin-red |
| | skin-green |
|---------------------------------------------------------|
 

skin-blue中的 blue 蓝 修改的是标题的颜色

  AdminLTE提供的默认皮肤颜色有:

    蓝 skin-blue skin-blue-light

    黄 skin-yellow skin-yellow-light  

    绿 skin-green skin-green-light

    紫 skin-purple skin-purple-light

    红skin-red  skin-red-light

    字体黑,皮肤白  skin-black skin-black-light

|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed |
| | layout-boxed |
| | layout-top-nav |
| | sidebar-collapse |
| | sidebar-mini |
|---------------------------------------------------------|
  .fixed 只是为了固定导航栏
  .layout-boxed    只是将页面包含在一个固定盒子中,max-width最大宽度: 1250px;
  注意:当fixed布局和layout-boxed布局一起使用时,layout-boxed样式不会生效,只有fixed布局会生效
       .sidebar-collapse  让侧边栏默认是隐藏状态
  .layout-top-nav   将导航栏设置为单纯的导航菜单,不使用侧边栏
  .sidebar-mini 让侧边栏和左侧导航一起折叠,并且最小化是小图标。
  注意:sidebar-mini一般和Fixed layout-boxed sidebar-collapse 一起配合使用,因为layout-top-nav布局的目的就是不要侧边栏
 
  

  上图 body样式中去掉 sidebar-mini,点击下图按钮效果如下图:

body 属性加上sidebar-mini 之后,点击sidebar toggle button,logo-lg隐藏,logo-mini显示

效果如下图所示:

  右侧菜单项

main-sidebar  左侧菜单导航
  .sidebar-menu 菜单目录容器
 

最近项目需要用到AdminLTE,所以整理一份中文版的小教程的更多相关文章

  1. 【ASP.NET Core分布式项目实战】(三)整理IdentityServer4 MVC授权、Consent功能实现

    本博客根据http://video.jessetalk.cn/my/course/5视频整理(内容可能会有部分,推荐看源视频学习) 前言 由于之前的博客都是基于其他的博客进行开发,现在重新整理一下方便 ...

  2. 开源 iOS 项目分类索引大全 - 待整理

    开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...

  3. 用eclipse开发项目时遇到的常见错误整理,和配套解决方案(1)

    01. MyEclipse项目导入eclipse后,怎么发布不了? 今天导入了之前的一个MyEclipse项目,更改jdk后,发现发布不了.解决方案如下: 打开项目根目录,找到.settings文件夹 ...

  4. jqgrid项目使用记录/注释版/未整理/

    jqgrid项目使用笔记function loadActData(){ $("#actGridTable").clearGridData();//首先清空表格内容 var url ...

  5. (转载) VS编译duilib项目时候的错误解决方法整理

    原文地址:http://blog.csdn.net/x356982611/article/details/30217473 @1:找不到Riched20.lib 用everything等软件搜索下磁盘 ...

  6. VS编译duilib项目时候的错误解决方法整理(转载)

    转载自:http://blog.csdn.net/x356982611/article/details/30217473 @1:找不到Riched20.lib 用everything等软件搜索下磁盘, ...

  7. VS编译duilib项目时候的错误解决方法整理

    @1:找不到Riched20.lib 用everything等软件搜索下磁盘.找到所在的文件夹加入到vs的库文件夹就可以.我得是C:\Program Files (x86)\Microsoft SDK ...

  8. ESA2GJK1DH1K开发教程: 来看看最新整理的整个开发板的教程大纲吧

    项目开发:教程大纲(测试板型号:ESA2GJK1DH1K) 购买链接: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911deb ...

  9. 整理eclipse,升级jdk环境小记录

    这2天在整理项目: 需要把eclipse 32位,jdk1.6 32位的更改为eclipse 64位,jdk1.8 64位版本的,于是我就在一台window7的电脑上直接操作,遇到了一下几点问题,记录 ...

随机推荐

  1. windows 中使用 winscp 工具连接linux

    1.安装winscp 2.在linux系统中安装ssh,执行命令:sudo apt-get install openssh-server 3.连接成功

  2. 自定义Razor 标签

    1.首先需要一个abstract class WebViewPage<T> ,继承系统的 System.Web.Mvc.WebViewPage<TModel> 再定义一个Web ...

  3. hau1021 Fibonacci Again(递归)

    Fibonacci Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  4. asp.net搭建项目架构

    项目的架构决定这个项目的好坏. 今天我说说传统三层架构的搭建 第一步 创建一个解决方案 例如 TaskSystem 接着这个解决方案下创建六个项目分别: TaskSystem.DAL TaskSyst ...

  5. java课后思考问题(一)

    1.一个Java类文件中真的只能有一个共有类吗? 一个Java类文件中只能有一个公有类 2.请使用Eclipse或javac检测一下以下代码,有错吗? 在Java中,可以将一个类定义在另一个类里面或者 ...

  6. java——int、args[]传参、标签、数字塔?、一个输入格式

    1.当int型整数超出自己范围时,会从它的上界重新开始. public class exp { public static void main(String[] args) { int i = 214 ...

  7. maya2018安装失败如何卸载重装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. VS 快速插入无参构造器

    输入ctor后 点击两次Tab键,即可快速插入无参构造器.

  9. .NET平台下使用C#连接各种数据库

    在.NET平台下,通常我们需要连接不同的数据库,这就需要我们配置连接字符串以及提供常用的class进行数据存取. 1.C#连接Access @"Provider=Microsoft.ACE. ...

  10. http学习笔记(二):URL和资源

    2.1浏览因特网资源 ------------总结:方案.主机.路径 方案:http,FTP,SMTP等 http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连 ...