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>
bootstrap AdminLTE模版的使用的更多相关文章
- 左侧导航条+中间显示内容+右侧菜单配置，Bootstrap+AdminLTE+Jquery
1.最近做个导航页面,找了一大堆UI,最终选了AdminLTE,这个UI也是以bootstrap为基础,简单实用,中间内容用jquery的load加载,简单暴力,非常适合快速开发. 2.效果图如下: ...
- vue学习（三）完善模板页(bootstrap+AdminLTE)
1.配置index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- bootstrap 简易模版
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template
原文地址 Create modal dialog form in jquery using bootstrap framework, slightly different from the usual ...
- 推荐10个bootstrap及其他框架的后台管理模板
相对于网站前台炫目多彩的设计,网址后台的设计模板貌似有点少,在这里推荐10个可以免费下载的~ 1.自适应超酷整站 win8风格的Bootstrap响应式网站后台管理模板-Apricot 2.boots ...
- 利用GitHub Pages和Bootstrap创建个人网站
作为一名想要想找前端实习的即将毕业的学生,我最近意识到拥有个人网页会使自己的简历更容易被注意到.本文主要是我创建过程及个人心得,有些操作我也是第一次,所以难免在解释中会有错误.另外说明一下,我的电脑是 ...
- 玩转Bootstrap
一:bootstrap基本模版 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- Laravel 5.4 快速开发简书:
Laravel 5.4 快速开发简书第1章 课程介绍 介绍课程的大体脉络和课程安排 第2章 Laravel 5.4介绍 本节课会带领大家介绍laravel的各个版本历史以及讨论php框架的未来发展趋势 ...
- Asp.Net Core 项目实战之权限管理系统（0） 无中生有
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
随机推荐
- python连接kafka生产者，消费者脚本
# -*- coding: utf-8 -*- ''''' 使用kafka-Python 1.3.3模块 # pip install kafka==1.3.5 # pip install kafka- ...
- Python-mysql 权限 pymysql 注入共计
1.mysql用户管理 *** 数据安全非常重要 不可能随便分配root账户 应该按照不同开发岗位分配不同的账户和权限 mysql中 将于用户相关的数据放在mysql库 user - > db ...
- DataGridView中进行增删改查
首先我们需要知道是在哪个数据库中的哪个表进行增删改查: 这就需要我们: 建立给连接服务器的类:(可以在方法类中建立) 建立一个对列名进行封装的类:方便数据之间的传接:(学到Linq-sql时这些就简便 ...
- [原著]java或者Js 代码逻辑来处理 突破 oracle sql “IN”长度的极限的问题
注:本文出自:博主自己研究验证可行 [原著]java或者Js 代码逻辑来处理 突破 oracle sql "IN"长度的极限的问题 在很多的时候 使用 select ...
- STL的基本操作指令
list :Lists将元素按顺序储存在链表中. 与 向量(vectors)相比, 它允许快速的插入和删除,但是随机访问却比较慢. assign() 给list赋值 back() 返回最后一个元素 b ...
- 条件为空的sql你们写过么 (我也是醉了碰到了这种需求，当时还真有点o((⊙﹏⊙))o懵逼.jpg)
需求描述:单表,父子关系,有个统一的主键dict_id和一个父级别的parent_id,查询父级别的字典名称,parent_id是空,本渣用的是mybatis奥!!! 废话不多说,直接上代码mappe ...
- hdu3949 异或空间 + 求矩阵的主元
给定n个整数,将数分解成01序列,由这n个01序列构成矩阵,这n个数构成线性空间,这就是异或空间 将这个矩阵高斯消元,求出t个主元,那么由着t个主元构成的线性空间里总共有2^t个数 设这t个数分别是a ...
- uva11865 二分流量+最小生成树
uva好题真多 本题用二分法找flow,把流量小于flow的全部筛掉,剩下的边建立最小树形图,如果权值大于c或者不能建图,那么修改二分边界 上代码,觉得最小树形图的代码很优美 /* 题意:给定n个点, ...
- PyCharm+SVN
首先电脑安装svn,并且确svn/bin下面有svn.exe文件 没有bin/svn.exe解决方法: 重新打开TortoiseSVN安装文件-Modify-Next后在command line cl ...
- eclipse创建动态maven项目
需求表均同springmvc案例 此处只是使用maven 注意,以下所有需要建立在你的eclipse等已经集成配置好了maven了,说白了就是新建项目的时候已经可以找到maven了 没有的话需要安装m ...