adminLTE 教程 -0 基础布局

基础布局。

1、meta没的说

2、引入bootstrap

3、引入字体库,肯定用得到,下载到本地放在plugins下也可以

4、adminLTE子什么的文件肯定需要

5、皮肤skin,可以引入_all...,但是如果只需要一个皮肤的话,比如只需要蓝色,直接引入skin-blue就行,毕竟越简越好

6、兼容IE8的两个js文件

7、jquery没的说

8、fastclick,触摸设备快速点击体验,不想兼容手机可以去掉

9、slimscroll,菜单和页面中的滚动条样式,放上去毕竟好看嘛。(看一下不加的效果,不好看吧)

加上slimscroll就是这个效果,还是加上吧

0、基础页面
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Starter</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script>
  var AdminLTEOptions = {
  };
</script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>

这就是最基础的页面,拿去慢用。

这个文档和adminLTE基础配合看效果更好!!!

下一节 adminLTE 教程 -1 基础布局

时间: 2024-08-09 10:30:59

adminLTE 教程 -0 基础布局的相关文章

adminLTE 教程 -1 基础

先介绍一下adminLTE的官方网站:adminLTE官方网站 和github:adminLTE的github 演示地址:adminLTE演示地址 大家可以在上面的官方网站或者github上下载源码 adminLTE是基于bootstrap3的前端框架,并且将bootstrap3进行修改来适应自身的样式. adminLTE除了可以使用bootstrap3的大多数样式之外,自身也提供了一些非常实用的样式包装,并且在样式演示中已经基本罗列出来了. adminLTE的js是基于jquery2. adm

Android程序开发0基础教程(一)

程序猿学英语就上视觉英语网 Android程序开发0基础教程(一) 平台简单介绍 令人激动的Google手机操作系统平台-Android在2007年11月13日正式公布了,这是一个开放源码的操作系统,内核为Linux. 作为开发人员,我们所关心的是这个平台的架构以及所支持的开发语言.以下是这个平台的架构模型: 这个平台有下面功能: + Application framework: 可重用的和可替换的组件部分,在这个层面上,全部的软件都是平等的. + Dalvik virtul machine:

Android基础入门教程——0.教程引言与目录

Android基础入门教程--0.教程引言与目录 标签(空格分隔): Android基础入门教程 好吧,先自夸一下: 使用Markdown来写blog,使用Android Studio来开发Android程序, 除了基础讲解,还会结合实际开发中用到的,遇到的进行学习,跟着路线图学习 事半功倍,希望给各位Android初学者带来便利~相信你会慢慢喜欢上这个教程的! 另外该教程除了在csdn上发布外,还可以在w3c菜鸟笔记上发布,当然后者是FK排版 过的,看起来比会比csdn上的好看一些,这里同时感

AxureRP7.0基础教程系列 部件详解水平线和垂直线 HORIZONTAL & VERTICAL LINES

原型库网站-讲师金乌原创发布,可自由转载,请注明出处! Axure中文官网:www.AxureRP.cn   <AxureRP7.0部件详解> 水平线和垂直线 HORIZONTAL & VERTICAL LINES 使用案例 将页面区块化 最常见的用法是将内容分解成几个部分,比如,讲页面分为 header 和 body. 编辑线条 添加箭头 线条可以通过工具栏中的箭头样式转换为箭头:选中线条,点击箭头样式,在下拉列表中选择箭头样式. 线宽.颜色和样式 线条可以添加颜色.设置宽度和添加样

适合0基础的web开发系列教程-教程概述

教程概述 各位网友大家好,我是夜鹰教程网的汤老师,从今天开始,我准备写一套web前端开发的教程. 适合0基础的朋友,从最简单的html开始. 力争做到学完全套教程能在IT行业就业的水平. 特别适合应届毕业生.已上班但是想转行的朋友.喜欢前端开发的业余爱好者. 学习路线为: html =>css=>javascript=>jquery=>h5=>css3=>nodejs=>mongodb=>git>grunt=>webpack=>less=&

React Native 从零到高级- 0基础学习路线

React Native QQ交流群(美团,饿了么,阿里的大神都在里面):576089067 React Native  从0 基础到高级 视频教程正在重录中,要了解最新进度可以关注菜鸟窝微信公众号(下图),旧版视频教程可以点击这里在线学习 学习路线(文章版),江清清老师出品,点击这里关注江清清 ,同时可以关注一下他的课程 基础入门:1.React Native For Android环境配置以及第一个实例2.React Native开发IDE安装及配置3.React Native应用设备运行(

程序设计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

【html】【7】基础布局初探

当了解了上面的文章有一定基础后,开始尝试初步基础布局,可能不美观,但是要开始有布局框架思想 基础代码: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml&q