adminLTE 教程 -1 基础

来源：互联网发布：贝克汉姆帅知乎编辑：程序博客网时间：2024/05/29 07:44

先介绍一下adminLTE的官方网站：adminLTE官方网站和github：adminLTE的github

演示地址：adminLTE演示地址

大家可以在上面的官方网站或者github上下载源码

adminLTE是基于bootstrap3的前端框架，并且将bootstrap3进行修改来适应自身的样式。

adminLTE除了可以使用bootstrap3的大多数样式之外，自身也提供了一些非常实用的样式包装，并且在样式演示中已经基本罗列出来了。

adminLTE的js是基于jquery2。

adminLTE的插件中使用的基本都是bootstrap和jquery的插件。

wKioL1jHnEmBtTrpAAA05NihYN8383.png-wh_50

想开始使用adminLTE样式，只需要在项目演示中按F12打开调试窗口，使用箭头选中控件，复制粘贴即可，如图

wKiom1jHm6GwPr8VAAFeaeGP0IU607.png-wh_50

adminLTE提供了基础模板页面starter.html，再此基础上做开发会快速很多：

wKioL1jHnNXB082nAAA5aNWJmCs167.png-wh_50

在adminLTE给的index2.php代码中，有几点需要注意：

一、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、布局

默认侧边栏隐藏，标题不移动

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构造

</header>

</aside>

</div>

</footer>

</aside>

</div>

三、body构造分析1-顶部导航栏

四、body构造分析1-左侧菜单栏

五、body构造分析1-中间内容

六、body构造分析1-底部标注

七、body构造分析1-右侧菜单栏

未完待续。。。

阅读全文

0 0