参考:  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. Django ----- 模板2

    tags for <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% endfor %} #结 ...

  2. 【原创】运维基础之OpenResty

    openresty 1.15.8.1 官方:https://openresty.org/en/ 一 简介 OpenResty® is a dynamic web platform based on N ...

  3. layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍

    方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...

  4. 连接mysql(建表和删表)

    from sqlalchemy.ext.declarative import declarative_base##拿到父类from sqlalchemy import Column##拿到字段from ...

  5. python之__call__()

    __call__ 在Python中,函数其实是一个对象: >>> f = abs >>> f.__name__ 'abs' >>> f(-123) ...

  6. 【Android开发经验】android:windowSoftInputMode属性具体解释

    本文章来自CSDN博客:http://blog.csdn.net/zhaokaiqiang1992.转载请注明地址! 在前面的一篇文章中,简单的介绍了一下怎样实现软键盘不自己主动弹出,使用的方法是设置 ...

  7. Codeforces 993E Nikita and Order Statistics [FFT]

    洛谷 Codeforces 思路 一开始想偏想到了DP,后来发现我SB了-- 考虑每个\(a_i<x\)的\(i\),记录它前一个和后一个到它的距离为\(L_i,R_i\),那么就有 \[ an ...

  8. hashtable——散列表

    2018-11-01 散列表---哈希表基于快速存取,时间换空间一种基于线性数组的线性表,不过元素之间并非紧密排列 散列函数--通过函数,有key关键码计算地址(相当于数组下标),函数尽可能使元素均匀 ...

  9. es6 super关键字

    rhttp://es6.ruanyifeng.com/#docs/class-extends super关键字,既可以当作函数使用,也可以当作对象使用.这俩种的使用是不一样的 第一种:函数使用 代表父 ...

  10. Java中数据类型默认转换和强制类型转换

    默认转换: a:由低到高一次为:(byte   short    char  )---int ---long ---float --- double b:注意:byte   short    char ...