参考:  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>

bootstrap AdminLTE模版的使用的更多相关文章

  1. 左侧导航条+中间显示内容+右侧菜单配置，Bootstrap+AdminLTE+Jquery

    1.最近做个导航页面,找了一大堆UI,最终选了AdminLTE,这个UI也是以bootstrap为基础,简单实用,中间内容用jquery的load加载,简单暴力,非常适合快速开发. 2.效果图如下: ...

  2. vue学习（三）完善模板页(bootstrap+AdminLTE)

    1.配置index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. bootstrap 简易模版

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template

    原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...

  5. 推荐10个bootstrap及其他框架的后台管理模板

    相对于网站前台炫目多彩的设计,网址后台的设计模板貌似有点少,在这里推荐10个可以免费下载的~ 1.自适应超酷整站 win8风格的Bootstrap响应式网站后台管理模板-Apricot 2.boots ...

  6. 利用GitHub Pages和Bootstrap创建个人网站

    作为一名想要想找前端实习的即将毕业的学生,我最近意识到拥有个人网页会使自己的简历更容易被注意到.本文主要是我创建过程及个人心得,有些操作我也是第一次,所以难免在解释中会有错误.另外说明一下,我的电脑是 ...

  7. 玩转Bootstrap

    一:bootstrap基本模版 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. Laravel 5.4 快速开发简书:

    Laravel 5.4 快速开发简书第1章 课程介绍 介绍课程的大体脉络和课程安排 第2章 Laravel 5.4介绍 本节课会带领大家介绍laravel的各个版本历史以及讨论php框架的未来发展趋势 ...

  9. Asp.Net Core 项目实战之权限管理系统（0） 无中生有

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

随机推荐

  1. sed 用法记录

    sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为:         sed ...

  2. malloc(0)

    malloc的内存分配之 malloc(0)的内存分配情况 #include<iostream> using namespace std; int main() { char *p; if ...

  3. Vuejs的一些总结

    http://blog.csdn.net/xllily_11/article/details/52312044 原文链接:http://mrzhang123.github.io/2016/07/14/ ...

  4. leetcode(js)算法之17电话号码的字母组合

    给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母 示例: 输入:"23" 输出:[" ...

  5. SpringBoot全局日志管理（AOP）

    1.在pom.xml中引入aop的jar包 <dependency> <groupId>org.springframework.boot</groupId> < ...

  6. Visual Studio UML

    1 .类图设计 2.动态图设计,业务工作流程说明了业务为所想服务的业务助教提供了所需要的价值而必须完成的工作,业务用例由一系列的活动组成,它们共同为业务主角生成某些工件,工作流程通常包括一个基本的工作 ...

  7. border画梯形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  8. java----AOP框架理解

    面向切面编程: 通过动态代理+加配置文件 目的解耦 给主逻辑添加一些修饰功能,但是不在主逻辑代码中进行修改,有点类似python中的装饰器,调用方法还是是通过接口的那个类来调用: import jav ...

  9. easyUI-layout布局

    https://www.cnblogs.com/kexb/p/3685913.html <!DOCTYPE html><html><head> <meta c ...

  10. 从零开始 DOM操作 笔记

        <div id="box" class="box"></div>   --> var myBox = document.g ...