网页学习|AdminLTE第一天

最新推荐文章于 2024-03-27 19:15:13 发布

徐畅Three

最新推荐文章于 2024-03-27 19:15:13 发布

阅读量1.4k

点赞数 2

分类专栏： AdminLTE

本文链接：https://blog.csdn.net/KickAC/article/details/75716067

版权

AdminLTE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

接触到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、布局

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

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.顶部导航

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">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
      <span class="label label-primary">Label</span>
    </div>
    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div>
  <!-- /.box-body -->
  <div class="box-footer">
    The footer of the box
  </div>
  <!-- box-footer -->
</div>
<!-- /.box -->