adminLTE的介绍

adminLTE的介绍一.adminLTE的介绍adminLTE的官方网站:adminLTE官方网站和github:adminLTE的github演示地址:adminLTE演示地址adminLTE是基于bootstrap3的前端框架,并且将bootstrap3进行修改来适应自身的样式。adminLTE除了可以使用bootstrap3的大多数样式之外,自身也提供了一些非常实用的样式包装,并且在样式演

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一.adminLTE的介绍

adminLTE的官方网站:adminLTE官方网站 和github:adminLTE的github

演示地址:adminLTE演示地址

adminLTE是基于bootstrap3的前端框架,并且将bootstrap3进行修改来适应自身的样式。
adminLTE除了可以使用bootstrap3的大多数样式之外,自身也提供了一些非常实用的样式包装,并且在样式演示中已经基本罗列出来了。
adminLTE的js是基于jquery2。

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

AdminLTE 也同样具备了后台应有模板,像登录模板、注册模板、个人模板、404模板、500模板、空白模板等,这些可以在下载后在 Examples 菜单里查看到。里面的组件 Widgets 页面,不要以为是一些像 easyui 的组件,其实也是 AdminLTE 定义的一些 css 样式,像 box 样式,是里面最基础最常用的一个。里面的 js 插件除了 bootstrap 自带那模态窗、导航、下拉菜单外,其它就是集成一些有名的第三方插件,像 select2、CK Editor、iCheck、DataTables 等等。


二.基础布局。
1、引入bootstrap
2、引入字体库,肯定用得到,下载到本地放在plugins下也可以
3、皮肤skin,可以引入_all…,但是如果只需要一个皮肤的话,比如只需要蓝色,直接引入skin-blue就行,毕竟越简越好
4、兼容IE8的两个js文件
5、fastclick,触摸设备快速点击体验,不想兼容手机可以去掉

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>AdminLTE基础框架</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.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/font-awesome-4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="plugins/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>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
	<!-- 顶部导航栏 -->
	<header class="main-header">
		<!-- Logo -->
			<a href="../../index2.html" class="logo">
				<!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"><b>A</b>LT</span>
				<!-- logo for regular state and mobile devices -->
				<span class="logo-lg"><b>Admin</b>LTE</span>
			</a>
			<!-- Header Navbar: style can be found in header.less -->
			<nav class="navbar navbar-static-top">
				<!-- Sidebar toggle button-->
			<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<div class="navbar-custom-menu">
				</div>
			</nav>
	</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>
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<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>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
</body>
</html>

参考:adminLTE 教程 用基于Bootstrap的AdminLte后台模板重写IT系统

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164541.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 淘宝开源工具:Orztop

    淘宝开源工具:Orztop

  • 7道常见的数据分析面试题[通俗易懂]

    7道常见的数据分析面试题[通俗易懂]InfoQ内容来自极客时间《数据分析实战45讲》数据分析师近几年在国内互联网圈越来越火,很多开发都因为薪资和发展前景,希望转行到数据分析岗。今天,我们就来聊聊面试数据分析师的那些事。其实,数据分析能力是每个互联网人的必备技能,哪怕你没有转行数据分析师的计划,也推荐你看看这个专题,提升你的数据能力。数据分析的能力要求与数据分析相关的工作有一个特质,就是对数字非常敏感,同时也要求对数据具…

  • Java基础入门笔记02——文档注释,JavaDos文件,数据类型,类型转换,变量默认值问题

    Java基础入门笔记02——文档注释,JavaDos文件,数据类型,类型转换,变量默认值问题科普文字maven 约定大于配置maven整合了所有jar包springBoot整合了所有框架IDEA进行优化 百度看下 快捷键2021.11.13文档注释javadoc是Sun公司提供的一个技术,它从程序源代码中抽取类、方法、成员等注释形成一个和源代码配套的API帮助文档。用于解释包或者方法或者类的作用//JavaDoc:文档注释 /** */package com.baidu.www.base;/** * @author tim 作者名 * @versio

  • 程序员常说的外包公司到底是什么意思_程序员项目外包

    程序员常说的外包公司到底是什么意思_程序员项目外包程序员工作的企业有好几种类型,比如说互联网企业,传统企业,还有外包公司,这几种类型的企业不论是工作性质还是福利待遇都有差异。都说外包公司不好,今天就来说说什么是外包公司。外包公司到底是什么?为了更好地分析,我们需要了解什么是外包。外包是一种将目标,委托给其他组织的管理模型。外包有很多种,如项目外包、产品外包、工程外包等等。而我们最为关心的,则是人力资源外包。这样说比较抽象,我来举个例子。项目外包:为了完成某个项目,出于进度、成本,甚至是风险转移的考量,将项目拆分一部分(如非核心部

  • 无人驾驶之传感器算法[通俗易懂]

    无人驾驶之传感器算法[通俗易懂]无人驾驶之传感器算法

  • 企业局域网的组建步骤和方法

    企业局域网的组建步骤和方法什么是局域网?所谓的局域网(LocalAreaNetwork,简称LAN),用于将有限范围内(例如一个实验室、一层办公楼或者校园)的各种计算机、终端与外部设备互联成网。企业局域网怎么建立?首先来了

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号