zoukankan      html  css  js  c++  java
  • bootstrap AdminLTE模版的使用

    参考:  https://adminlte.io/themes/AdminLTE/documentation/index.html

         https://blog.csdn.net/gebitan505/article/details/78680019

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

    2. 想开始使用adminLTE样式,只需要在项目演示中按F12打开调试窗口,使用箭头选中控件,复制粘贴即可(F12调是界面,鼠标选中控件,右键 Inspest Element)

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

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

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

  • 相关阅读:
    php
    nginx
    docker
    pyenv 配置python虚拟环境
    [运维笔记] Nginx编译安装
    [运维笔记] Mysql单库备份脚本
    BurpSuite Intruder 4种攻击模式
    java判断一个单向链表是否有环路
    二分查找(递归和非递归)
    反转链表算法题
  • 原文地址:https://www.cnblogs.com/yitianyouyitian/p/9767599.html
Copyright © 2011-2022 走看看