adminLTE 教程 -1 基础

先介绍一下adminLTE的官方网站:adminLTE官方网站 和github:adminLTE的github

演示地址:adminLTE演示地址

大家可以在上面的官方网站或者github上下载源码

adminLTE是基于bootstrap3的前端框架,并且将bootstrap3进行修改来适应自身的样式。

adminLTE除了可以使用bootstrap3的大多数样式之外,自身也提供了一些非常实用的样式包装,并且在样式演示中已经基本罗列出来了。

adminLTE的js是基于jquery2。

adminLTE的插件中使用的基本都是bootstrap和jquery的插件。

想开始使用adminLTE样式,只需要在项目演示中按F12打开调试窗口,使用箭头选中控件,复制粘贴即可,如图

adminLTE提供了基础模板页面starter.html,再此基础上做开发会快速很多:

在adminLTE给的index2.php代码中,有几点需要注意:

1、皮肤

引入皮肤的文件:  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

在 <body class="hold-transition skin-black-light sidebar-mini">

皮肤的类:

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 白白

2、adminLTE提供的布局

Fixed 固定 完全隐藏

sidebar-collapse 侧边栏折叠隐藏,而且完全隐藏

layout-boxed    盒子布局,不平铺

layout-top-nav   只有顶部导航 完全隐藏

sidebar-mini   侧边栏隐藏时会有小图标

其中Fixed和layout-boxed不可同时使用,其他的可以根据自身需求组合

3、其他注意事项

<script src="plugins/fastclick/fastclick.js"></script>消除点击延迟

<script src="dist/js/app.min.js"></script>adminLTE配置文件

下面这俩个只用于演示,项目中可以参考

<!-- AdminLTE dashboard demo (This is only for demo purposes) -->

<script src="dist/js/pages/dashboard2.js"></script>

<!-- AdminLTE for demo purposes -->

<script src="dist/js/demo.js"></script>

下一节研究一下adminLTE的box,adminLTE提供的样式包装中box算是最主要的部分了

时间: 2024-10-13 17:41:45

adminLTE 教程 -1 基础的相关文章

adminLTE 教程 -0 基础布局

基础布局. 1.meta没的说 2.引入bootstrap 3.引入字体库,肯定用得到,下载到本地放在plugins下也可以 4.adminLTE子什么的文件肯定需要 5.皮肤skin,可以引入_all...,但是如果只需要一个皮肤的话,比如只需要蓝色,直接引入skin-blue就行,毕竟越简越好 6.兼容IE8的两个js文件 7.jquery没的说 8.fastclick,触摸设备快速点击体验,不想兼容手机可以去掉 9.slimscroll,菜单和页面中的滚动条样式,放上去毕竟好看嘛.(看一下

Nmap扫描教程之基础扫描详解

Nmap扫描教程之基础扫描详解 Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在实施这些扫描工作之前,需要先简单了解下Nmap工具的使用,以方便后面实施扫描.所以,本章将通过使用Nmap工具实施基础的扫描,来帮助用户了解该工具. Nmap扫描扫描概述 在实施基本的扫描之前,需要先了解一些Nmap网络扫描的基本知识,及需要考虑的一些法律边界问题.本节将对网络基本扫描进行一个简单介

IOS 教程以及基础知识

http://wenku.baidu.com/course/view/1ce3571252d380eb62946d8c http://iphone.apkbus.com/ www.itcast.cn //博客 http://blog.csdn.net/cutesource/article/details/7715593 // ios虚拟开发环境搭建 http://www.cnblogs.com/mjios/ //ios 博客 http://www.9ria.com/subject/summary

程序设计C语言二级考试教程 Java基础视频教程 安卓软件开发教程 Unity3D游戏制作入门教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

平面设计 计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

Swift教程_基础技术_获取当前日期时间、日期时间格式化及转换

Swift教程_基础技术_类型转换(父子类转换:Int.Double.String转换) Swift教程_基础技术_获取当前日期时间.日期时间格式化及转换 1.获取当前日期时间 var nowDate = NSDate() var formatter = NSDateFormatter() formatter.dateFormat = "yyyy-MM-dd HH:mm:ss" var dateString = formatter.stringFromDate(nowDate) pri

电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

区块链教程交易所基础开发通过接口查询币种的提币情况-etc

兄弟连区块链教程交易所基础开发通过接口查询币种的提币情况-etcpackage main import ("fmt" "github.com/buger/jsonparser" "github.com/levigross/grequests" ) // HTTPGet .func HTTPGet(url string, requestOptions *grequests.RequestOptions) (response []byte, err

区块链教程交易所基础开发通过接口查询各个币种的提币情况-eth

兄弟连区块链教程交易所基础开发通过接口查询各个币种的提币情况-eth package main import ( "errors" "fmt" "math" "strconv" "strings" "github.com/buger/jsonparser" "github.com/levigross/grequests" ) const min = 0.0000000