参考:  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. MySQL MyISAM引擎转换为InnoDB操作记录

    进入mysql命令行模式: # mysql -uroot -ppwd 1.查看mysql提供什么存储引擎: mysql> show engines; 2.查看mysql当前提供的默认存储引擎: ...

  2. linux服务器上配置多个svn仓库

    linux服务器上配置多个svn仓库 1.在指定目录建立仓库保存总目录,本文示例目录设定为:/usr/local/svn/svnrepos # mkdir -p /usr/local/svn/svnr ...

  3. Linux多台主机间配置SSH免密登陆

    1.安装ssh.  sudo apt-get install ssh. 安装完成后会在~目录(当前用户主目录,即这里的/home/xuhui)下产生一个隐藏文件夹.ssh(ls -a 可以查看隐藏文件 ...

  4. Linux命令之useradd和userdel（添加、删除用户）

    一.[useradd]:添加用户命令 1.作用 useradd或adduser命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s sh ...

  5. 【原创】大数据基础之Hive（4）hive元数据库核心表结构

    1 dbs +-------+-----------------------+----------------------------------------------+------------+- ...

  6. PHP中empty，isset，is_null的区别

    isset 判断变量是否已存在 empty 判断变量是否为空或为0 is_null 判断变量是否为NULL 仅作为记录使用. 参考链接:http://www.jb51.net/article/6903 ...

  7. LNMP环境部署

    说明: 操作系统:CentOS 5.6 32位 准备篇: 一.配置好IP.DNS .网关,确保使用远程连接工具能够连接服务器 二.配置防火墙,开启80端口.3306端口 vi /etc/sysconf ...

  8. Oracle 之 外部表

    一.外部表概述 外部表只能在Oracle 9i 之后来使用.简单地说,外部表,是指不存在于数据库中的表. 通过向Oracle 提供描述外部表的元数据,我们可以把一个操作系统文件当成一个只读的数 据库表 ...

  9. day04 运算符 流程控制 （if while/of）

    1. 运算符算数运算符 + - * / int / float :数字类型 # print(10 + 3.1)# print(10 / 3)# print(10 // 3)# print(10 % 3 ...

  10. LeetCode（67）：二进制求和

    Easy! 题目描述: 给定两个二进制字符串,返回它们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = " ...