adminLTE的介绍

客官°小女子只卖身不卖艺 2021-09-14 09:38 338阅读 0赞

一.adminLTE的介绍

adminLTE的官方网站：[adminLTE官方网站][adminLTE] 和github：[adminLTE的github][adminLTE_github]

演示地址：[adminLTE演示地址][adminLTE 1]  
  
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>
    	
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    	
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        
        <link rel="stylesheet" href="plugins/font-awesome-4.5.0/css/font-awesome.min.css">
        
        <link rel="stylesheet" href="plugins/ionicons-2.0.1/css/ionicons.min.css">
        
        <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    	<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
    	
    </head>
    <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
    	
    	<header class="main-header">
    		
    			<a href="../../index2.html" class="logo">
    				
    				<span class="logo-mini"><b>A</b>LT</span>
    				
    				<span class="logo-lg"><b>Admin</b>LTE</span>
    			</a>
    			
    			<nav class="navbar navbar-static-top">
    				
    			<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>
    	
    	<div class="control-sidebar-bg"></div>
    </div>
    
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    
    <script src="bootstrap/js/bootstrap.min.js"></script>
    
    <script src="plugins/fastclick/fastclick.js"></script>
    
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    
    <script src="dist/js/adminlte.min.js"></script>
    </body>
    </html>

参考：[adminLTE 教程][adminLTE 2] [用基于Bootstrap的AdminLte后台模板重写IT系统][Bootstrap_AdminLte_IT]

[adminLTE]: https://adminlte.io/
[adminLTE_github]: https://github.com/almasaeed2010/AdminLTE/
[adminLTE 1]: https://adminlte.io/themes/AdminLTE/index2.html
[adminLTE 2]: http://11140372.blog.51cto.com/11130372/1906359
[Bootstrap_AdminLte_IT]: http://caijt.com/2016/01/17/377/