接触到AdminLTE百度上面的资料很少,也没有有系统的教学,学起来很是费劲,但是还是要开始
第一天学习的内容是关于AdminLTE的布局
一、body样式:
也就是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">
二、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.顶部导航
2.左侧导航
3.右控制侧栏
4.框
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Default Box Example</h3>
<div class="box-tools pull-right">
<span class="label label-primary">Label</span>
</div>
</div>
<div class="box-body">
The body of the box
</div>
<div class="box-footer">
The footer of the box
</div>
</div>
5.信息框
6.直接聊天
所有的上述都可以在
https://adminlte.io/docs/2.4/direct-chat