注：由于最近要使用AdminLTE，文档只有英文的(而且并不是十分详细)，就写一个快速入门的
官网实例：https://www.almsaeedstudio.com/themes/AdminLTE/index2.html
模板 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AdminLTE 2 | Dashboard</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" rel="external nofollow" href="bootstrap/css/bootstrap.min.css"> <!-- Font Awesome --> <link rel="stylesheet" rel="external nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" rel="external nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> <!-- Theme style --> <link rel="stylesheet" rel="external nofollow" href="dist/css/AdminLTE.min.css"> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link rel="stylesheet" rel="external nofollow" href="dist/css/skins/_all-skins.min.css"> <!-- iCheck --> <link rel="stylesheet" rel="external nofollow" href="plugins/iCheck/flat/blue.css"> <!-- Morris chart --> <link rel="stylesheet" rel="external nofollow" href="plugins/morris/morris.css"> <!-- jvectormap --> <link rel="stylesheet" rel="external nofollow" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css"> <!-- Date Picker --> <link rel="stylesheet" rel="external nofollow" href="plugins/datepicker/datepicker3.css"> <!-- Daterange picker --> <link rel="stylesheet" rel="external nofollow" href="plugins/daterangepicker/daterangepicker-bs3.css"> <!-- bootstrap wysihtml5 - text editor --> <link rel="stylesheet" rel="external nofollow" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[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"> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> </div> <footer class="main-footer"> </footer> <!-- Control Sidebar --> <aside class="control-sidebar control-sidebar-dark"> </aside> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <div class="control-sidebar-bg"></div></div><!-- ./wrapper --><!-- jQuery 2.2.0 --><script src="plugins/jQuery/jQuery-2.2.0.min.js"></script><!-- jQuery UI 1.11.4 --><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script><!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --><script> $.widget.bridge('uibutton', $.ui.button);</script><!-- Bootstrap 3.3.6 --><script src="bootstrap/js/bootstrap.min.js"></script><!-- Morris.js charts --><script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script><script src="plugins/morris/morris.min.js"></script><!-- Sparkline --><script src="plugins/sparkline/jquery.sparkline.min.js"></script><!-- jvectormap --><script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script><script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script><!-- jQuery Knob Chart --><script src="plugins/knob/jquery.knob.js"></script><!-- daterangepicker --><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script><script src="plugins/daterangepicker/daterangepicker.js"></script><!-- datepicker --><script src="plugins/datepicker/bootstrap-datepicker.js"></script><!-- Bootstrap WYSIHTML5 --><script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script><!-- Slimscroll --><script src="plugins/slimScroll/jquery.slimscroll.min.js"></script><!-- FastClick --><script src="plugins/fastclick/fastclick.js"></script><!-- AdminLTE App --><script src="dist/js/app.min.js"></script><!-- AdminLTE dashboard demo (This is only for demo purposes) --><script src="dist/js/pages/dashboard.js"></script><!-- AdminLTE for demo purposes --><script src="dist/js/demo.js"></script></body></html> 常用类 layout
.wrapper //div,包含所有
.main-header //header,包括logo和navbar
.main-sidebar //aside,sidebar菜单
.content-wrapper //div,主体nav
.navbar-static-top //滚动
.navbar-fixed-top //固定
.navbar-fixed-bottom //固定
widget
.info-box
<div class="info-box">
<!-- Apply any bg-* class to to the icon to color it -->
<span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">93,139</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
.small-box
<div class="small-box bg-aqua">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a rel="external nofollow" href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
.box
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
The body of the box
</div>
<!-- /.box-body -->
</div>
注：可扩——loading,chat等UI Elements
nav-tabs-custom //tab切换列表progress //横纵icon
形式：class=”fa fa-x”
地址：http://localhost/AdminLTE2/pages/UI/icons.htmlTimelinecalendar