参考:  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. FreeSWITCH黑名单功能设置

    功能描述:对呼叫的号码进行过滤 步骤: 1.编译mod_blacklist 模块:进入源目录/usr/local/src/freeswitch  --> make mod_blacklist-i ...

  2. PHP针对数字的加密解密类，可直接使用

    <?phpnamespace app;/** * 加密解密类 * 该算法仅支持加密数字.比较适用于数据库中id字段的加密解密,以及根据数字显示url的加密. * @author 深秋的竹子 *  ...

  3. VUE 密码验证与提示

    1. 概述 1.1 说明 vue项目中,为了较为明了的让用户看到所输入的密码信息的长度与复杂度是否满足要求,开发一个组件来满足此需求(当密码输入时进行密码验证操作,当密码的长度在8到24位之间,密码中 ...

  4. Vue1.0到2.0变化

    一.生命周期 二.代码片段 在vue1.0中可以在template编写时出现: <template> <div>第一行</div> <div>第二行&l ...

  5. Confluence 6 重构索引缓慢

    你的索引构建是否需要很长时间?索引构建需要的时间是由下面的一些因素确定的: 你 Confluence 安装实例中的页面数量. 附件的数量,类型和大小. Confluence 安装实例可用的内存大小. ...

  6. PDF编辑方法，PDF怎么去除背景

    PDF文件现在是使用的频率很高的一个软件的格式,PDF文件能够更加直观清楚的表达,PDF文件的使用很方便但编辑起来就来没有那么容易了,PDF文件的编辑是需要借助软件的,今天小编就来跟大家分享一下PDF ...

  7. ZenMap扫描笔记

    1.软件界面如下,ZenMap 扫描工具是kali linu中对WEB渗透扫描的一款工具

  8. tensorflow(4):神经网络框架总结

    #总结神经网络框架 #1,搭建网络设计结构(前向传播) 文件forward.py def forward(x,regularizer): # 输入x 和正则化权重 w= b= y= return y ...

  9. N阶楼梯上楼问题

    N阶楼梯上楼问题 时间限制: 1 Sec  内存限制: 32 MB 题目描述 样例输出 13 #include <stdio.h> int main() { int i, n; long ...

  10. 监控CPU使用率并发送报警邮件

    #!/bin/bash DATE=$(date +%F" "%H:%M) #只支持centos6 IP=$(ifconfig eth0 | awk -F '[ :]+' '/ine ...