AdminLTE

AdminLTE

1、AdminLTE简介

• AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具，
• 它提供了一系列响应的、可重复使用的组件，并内置了多个模板页面；
• 同时自适应多种屏幕分辨率，兼容PC和移动端。通过AdminLTE，我们可以快速的创建一个响应式的Html5网站。
• AdminLTE框架在网页架构与设计上，有很大的辅助作用
• 尤其是前端架构设计师，用好AdminLTE 不但美观，而且可以免去写很大CSS与JS的工作量。
• Admin已经帮我们提供好了很多的模板，我们直接找到源码使用就可以

2、AdminLTE的下载

• 官网版本：
  • GitHub上的网址： https://github.com/almasaeed2010/AdminLTE
• 汉化版本：
  • 传智博客的汉化：github上下载 https://github.com/itheima2017/adminlte2-itheima

3、AdminLTE的目录结构

• 官网版本的目录结构：

  • AdminLTE/
    ├── dist/
    │ ├── CSS/
    │ ├── JS
    │ ├── img
    ├── build/
    │ ├── less/
    │ │ ├── AdminLTE's Less files
    │ └── Bootstrap-less/ (Only for reference. No modifications have been made)
    │ ├── mixins/
    │ ├── variables.less
    │ ├── mixins.less
    └── plugins/
    ├── All the customized plugins CSS and JS files
    

• 传智播客汉化包版本的目录结构：

  • 在目录结构中assets、modules、pages、plugins都是前端开发时所使用到的，最终发布的就是release。
  • 所以对于我们使用AdminLTE2-IT黑马-定制版来说，我们只需要关注release目录下的结构就可以。
    -

4、模板的查看和查找

• 官网版本的模板查看查找：
  • 打开目录下的index.html，找到想要的页面，在地址栏找到该html文件的路径
• 传智播客汉化版本：
  • 在release目录下，在pages目录下面查看（查看all开头的，其他是没有样式的）
  • 也可通过浏览器，在地址栏找到该html文件的路径

5、Admin的使用

• 先把css、js、img、plugins 等拷贝到项目中

• 在定制版中的pages目录中找到相应的的html中的部分（注意对路径的修改）

• 布局与皮肤：

  • 布局：

    • .wrapper包住了body下的所有代码 
      
      .main-header里是网站的logo和导航栏的代码 
      
      .main-sidebar里是用户面板和侧边栏菜单的代码 
      
      .content-wrapper里是页面的页面和内容区域的代码 
      
      .main-footer里是页脚的代码 
      
      .control-sidebar里是页面右侧侧边栏区域的代码 
      

  • 布局选项 :

    • fixed：固定 
      layout-boxed：盒子布局
      layout-top-nav：顶部隐藏 
      sidebar-collapse：侧边栏隐藏 
      sidebar-mini：侧边栏隐藏时有小图标
      

  • 皮肤：

    • skin-blue：蓝色 
      skin-black：黑色 
      skin-purple：紫色 
      skin-yellow：黄色 
      skin-red：红色 
      skin-green：绿色
      

• 以上项我们可以查看start.html页面中查看。

• 

6、修改图样式

在 UI界面元素 下面找到想要图标的样式名称 添加上即可（添加到相应的class元素上就好）

找对应的表单样式，直接复制对应的input就好了