AdminLTE 快速入门
使用包管理工具 Bower
Bower 是一个前端包管理工具。包的内容没有限制，可以是综合型的框架，如 Bootstrap，也可以是 JS 库，如 jQuery，还可以是图片、字体等等。
包管理工具会自动解决包与包之间的依赖关系。比如现在需要包 A，而包 A 依赖另一个包 B，则安装包 A 的时候，包管理工具会连同包 B 一起安装。
不管是主动安装的包，还是因为依赖关系自动下载的包，都存放在同一个目录下（默认是项目根目录下的 bower_components 目录）。也就是说，包与包之间是平行关系，没有嵌套关系。这样，一个包不管被多少包依赖，都只需要出现在 bower_components 目录中一次。
如果你的项目还没有使用包管理工具 Bower，需要先在项目根目录下，执行下面的命令来生成一个 Bower 的包的配置文件 bower.json。这个文件用于记录项目所需的依赖。
$ bower init
如果想要自定义包的存放位置，只需要在项目根目录下新增文件 .bowerrc，然后定义 directory 属性。
{
"directory": "public/bower_components"
}
上面例子，将包的存放目录设置为 public/bower_components。
获取 AdminLTE
执行下面 Bower 命令，下载 AdminLTE。
$ bower install admin-lte --save
其中 --save 选项的作用是把安装的包记录到 bower.json 中。如果上面命令能够顺利执行完毕，在包的存放目录 bower_components下就可以看到文件夹 admin-lte。目录结构如下：
bower_components
└── admin-lte
├── build
├── dist
├── pages
├── plugins
...
└── starter.html
其中 starter.html 是 AdminLTE 建议用来作为起点的参考示例。build 目录包含未编译的 CSS、JS 文件；dist 目录包含经过编译的 CSS、JS 文件，同时还提供经过压缩的版本（.min）。plugins 目录存放依赖的插件；pages 目录下是一些示例页面。
如果上面 bower_components 目录位于运行目录下，就可以像下面这样来引入 AdminLTE 的样式表：
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
如果你没有使用前端包管理工具，而是通过其他途径获取的源码包，你会发现源码包已经包含了一个 bower_components 目录，你至少要把 dist、plugins 和 bower_components 这三个目录复制到项目的运行目录中。假设运行目录是 public，则下面的做法是可取的：
public
├── static
│ └── admin-lte
│ ├── bower_components
│ ├── dist
│ └── plugins
└── index.html
下面以 starter.html 为例，来认识 AdminLTE 页面的基本结构。
HTML 结构
在 head 区域，前三个 meta 标签为固定写法，之后是 title 标签，下面是省略了用于引入外部样式表的 links 标签的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>AdminLTE 2 | Starter</title>
</head>
在 body 区域，.wrapper 将页面上的元素都包裹其中。下面是省略了用于引入外部 JS 文件的 script 标签的示例。
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
</div>
</body>
</html>
CSS 和 JS
AdminLTE 主要依赖于 Bootstrap 3、jQuery 1.11+ 这两个框架。因此，在 head 区域，首先引入了 Bootstrap 的样式表，然后是一些字体库和图标库。
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">、
注意：示例 starter.html 中，外部文件的路径从 bower_components 开始，说明 AdminLTE 本身也是使用 Bower 作为包管理工具。
之后是 AdminLTE 的基本样式。
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
以及 AdminLTE 的皮肤样式。
<!-- AdminLTE Skins -->
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/skins/skin-blue.min.css">
需要在 body 标签添加相应的皮肤样式类，类名就是文件名。
<body class="hold-transition skin-blue sidebar-mini">
一些兼容的处理和谷歌字体库。
<!--[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 区域底部，依次引入 jQuery 、Bootstrap 和 AdminLTE 的 JS。
<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
布局
LOGO 和导航
<!-- Main Header -->
<header class="main-header">
...
</header>
侧边栏菜单
<aside class="main-sidebar">
</aside>
页标题和内容
<div class="content-wrapper">
</div>
控制面板
<aside class="control-sidebar control-sidebar-dark">
</aside>
版权信息
<!-- Main Footer -->
<footer class="main-footer">
</footer>
AdminLTE 2.0 提供了一组应用于布局的选项。 这将些类添加 body 标签 中，就可以得到想要的效果。
-
.fixed固定页眉和侧边栏，不随页面滚动。 -
.sidebar-collapse将在加载时折叠侧边栏。 -
.layout-boxed将得到 1250px的盒子布局。 -
.layout-top-nav移除侧边栏，并将你的链接移到顶部导航栏。
提示：除了，不能将 layout-boxed 和 fixed 混用外，其他的都可以。
