AdminLte学习记录一_结构

此文章版本为: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">

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值