参考:  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. jmeter设置全局变量

    2017年4月20日 10:07:37 星期四 情景, 从第一个请求的结果中匹配出code, 当作参数去做下次请求 以抢红包为例: 1. 创建红包, 并从返回结果中获取红包code 2. 将code设 ...

  2. 【原创】大叔经验分享（33）hive select count为0

    hive建表后直接将数据文件拷贝到table目录下,select * 可以查到数据,但是select count(1) 一直返回0,这个是因为hive中有个配置 hive.stats.autogath ...

  3. java 中int与integer的区别

    int与integer的区别从大的方面来说就是基本数据类型与其包装类的区别: int 是基本类型,直接存数值,而integer是对象,用一个引用指向这个对象 1.Java 中的数据类型分为基本数据类型 ...

  4. RHCE认证考前辅导

    一一:Linux认证题库详细说明 注意事项 (1) RHCSA上午2.5小时,RHCE下午3.5小时,考生需对题目非常熟练. (2) 5样东西必带(身份证.1支黑色水笔.常用邮箱.姓名拼音.聪明的脑袋 ...

  5. Confluence 6 配置 简易信息聚合（RSS）

    一个 Confluence 的管理员可以配置下面的 RSS 特性: Confluence 针对 RSS 聚合返回的最大项目数量. Confluence 针对 RSS 聚合允许的最大时间周期. 上面两个 ...

  6. Confluence 6 为发送邮件配置服务器

    配置你的 Confluence 服务器发送电子邮件消息能够允许你的 Confluence 用户: 接受邮件通知和每天更新报表. 通过电子邮件发送一个页面. 你可以通过配置 'From' 字段中的内容来 ...

  7. 对于stark(curd)插件的使用简单介绍

    一.创建表 from django.db import models from django.db import models class Department(models.Model): &quo ...

  8. select下拉框的数据回显

    需求描述:select框,下拉后又很多的选项,选择一个,根绝后台代码做查询,完成之后,页面上的select框还是之前选的那个值 解决思路:select本质就是 value和text一一对应,根据你的s ...

  9. bzoj 4816

    这题是莫比乌斯反演的典型题也是很有趣的题. 题意:求,其中f为为斐波那契数列 那么首先观察一下指数,发现是我们熟悉的形式,可以转化成这样的形式: 令T=kd,且假设n<m,有: 令 则原式= 这 ...

  10. Android Studio 创建不恰当的虚拟设备导致程序不正常运行

    操作系统:Windows 10 x64 IDE:Android Studio 3.2.1 使用Android Studio新建第一个Android程序,一开始在虚拟设备上面调试,不管程序怎么修改,运行 ...