adminlte 入门

adminlte 入门

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具，它提供了一系列响应的、可重复使用的组件，并内置了多个模板页面；同时自适应多种屏幕分辨率，兼容PC和移动端。通过AdminLTE，我们可以快速的创建一个响应式的Html5网站

初次使用，直接从它的官网下载最新版本。(百度搜索adminlte.io)

点击"download"按钮直接下载最新版本，点击"live preview"按钮可预览模板效果

AdminLTE提供了一个入门页面(starter.html),我们可以从它开始构建我们的网站

点开starter.html页面，我们能看到如下效果：

查看starter.html的源码，发现adminLTE的页面主要有五块区域：

.wrapper包住了body下的所有代码

.main-header里是网站的logo和导航栏的代码

.main-sidebar里是用户面板和侧边栏菜单的代码

.content-wrapper里是页面的页面和内容区域的代码

.main-footer里是页脚的代码

.control-sidebar里是页面右侧侧边栏区域的代码

我们可以调整body的样式，给我们的网站变换不同的皮肤

skin-blue：蓝色

skin-black：黑色

skin-purple：紫色

skin-yellow：黄色

skin-red：红色

skin-green：绿色

同时调整下布局选项

fixed：固定

layout-boxed：盒子布局

layout-top-nav：顶部隐藏

sidebar-collapse：侧边栏隐藏

sidebar-mini：侧边栏隐藏时有小图标

PC端效果

移动端效果

AdminLTE模板主题工具是不是很好用啊