AdminLte学习记录一_结构
2017-07-19 16:34
375 查看
此文章版本为:AdminLTE-2.3.11
一.基本介绍
adminLTE是基于bootstrap3的前端框架,并且将bootstrap3进行修改来适应自身的样式。
adminLTE除了可以使用bootstrap3的大多数样式之外,自身也提供了一些非常实用的样式包装,并且在样式演示中已经基本罗列出来。
adminLTE的js是基于jquery2。
adminLTE的插件中使用的基本都是bootstrap和jquery的插件。
AdminLte提供了基础模板starter.html,可以在此基础上进行快速地开发
二.body结构
<div class="wrapper">
<!-- 顶部导航栏 -->
<header class="main-header">
</header>
<!-- 左侧菜单栏 -->
<aside class="main-sidebar">
</aside>
<!-- 中间内容 -->
<div class="content-wrapper">
</div>
<!-- 底部标注 -->
<footer class="main-footer">
</footer>
<!-- 右侧菜单栏 -->
<aside class="control-sidebar control-sidebar-dark">
</aside>
<!-- 右侧菜单栏的样式,底部距离为0等 -->
<div class="control-sidebar-bg"></div>
</div>
三.body样式
1、类hold-transition是对IE的transition做了一些修复,在body中引用即可
2、皮肤的样式
侧边栏默认是暗色。
skin-blue中的 blue 蓝 修改的是标题的颜色,
只有指定第二个颜色的时候才会改变侧边栏颜色,
如skin-blue-light中第二个颜色表示侧边栏为亮色。
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
3、布局
默认侧边栏隐藏,标题不移动
<body class="hold-transition skin-blue">
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 class="hold-transition skin-blue sidebar-mini">
一.基本介绍
adminLTE是基于bootstrap3的前端框架,并且将bootstrap3进行修改来适应自身的样式。
adminLTE除了可以使用bootstrap3的大多数样式之外,自身也提供了一些非常实用的样式包装,并且在样式演示中已经基本罗列出来。
adminLTE的js是基于jquery2。
adminLTE的插件中使用的基本都是bootstrap和jquery的插件。
AdminLte提供了基础模板starter.html,可以在此基础上进行快速地开发
二.body结构
<div class="wrapper">
<!-- 顶部导航栏 -->
<header class="main-header">
</header>
<!-- 左侧菜单栏 -->
<aside class="main-sidebar">
</aside>
<!-- 中间内容 -->
<div class="content-wrapper">
</div>
<!-- 底部标注 -->
<footer class="main-footer">
</footer>
<!-- 右侧菜单栏 -->
<aside class="control-sidebar control-sidebar-dark">
</aside>
<!-- 右侧菜单栏的样式,底部距离为0等 -->
<div class="control-sidebar-bg"></div>
</div>
三.body样式
1、类hold-transition是对IE的transition做了一些修复,在body中引用即可
2、皮肤的样式
侧边栏默认是暗色。
skin-blue中的 blue 蓝 修改的是标题的颜色,
只有指定第二个颜色的时候才会改变侧边栏颜色,
如skin-blue-light中第二个颜色表示侧边栏为亮色。
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
3、布局
默认侧边栏隐藏,标题不移动
<body class="hold-transition skin-blue">
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 class="hold-transition skin-blue sidebar-mini">
相关文章推荐
- Smart210学习记录-------Linux设备驱动结构
- Hadoop学习记录(2)|HDFS shell命令|体系结构
- cocos2D 学习记录 一:CCNode类的层次结构
- oracle内存结构学习记录——SGA
- 学习记录 复杂网络权威知识——从自然与社会看复杂网络的重叠群落结构
- Python学习记录-3-简明Python教程-数据结构
- Ruby学习记录 - 循环结构
- OpenCV 学习记录3 数据结构和基本绘图
- 学习结构[记录]类型(1) - 开始
- 学习结构[记录]类型(6) - 结构的属性
- 2017.6.29 学习记录 结构控制语言
- JavaEE学习记录(一)--软件系统体系结构
- Delphi中学习结构[记录]类型用法(转载)
- 学习结构[记录]类型(2) - 压缩结构
- 记录我的数据结构(C语言)学习历程(2017年3月30号开始):
- 学习 《构建高并发网站结构》记录
- 学习结构[记录]类型(3) - 结构间的关系
- JVM学习记录-JVM的内存结构管理和运行时数据区理解
- boot 库学习记录--数据结构
- 记录自己的Android学习(二)Android应用程序结构详解