AdminLTE 入门教程

Posted 明天去哪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AdminLTE 入门教程相关的知识,希望对你有一定的参考价值。

注:由于最近要使用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" 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">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="plugins/morris/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" 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>

常用类

  1. layout
    .wrapper //div,包含所有
    .main-header //header,包括logo和navbar
    .main-sidebar //aside,sidebar菜单
    .content-wrapper //div,主体
  2. nav
    .navbar-static-top //滚动
    .navbar-fixed-top //固定
    .navbar-fixed-bottom //固定
  3. widget

    1. .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 -->

    2. .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 href="#" class="small-box-footer">
      More info <i class="fa fa-arrow-circle-right"></i>
      </a>
      </div>

    3. .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等
  4. UI Elements
    1. nav-tabs-custom //tab切换列表
    2. progress //横纵
    3. icon
      形式:class=”fa fa-x”
      地址:http://localhost/AdminLTE2/pages/UI/icons.html
    4. Timeline
    5. calendar

以上是关于AdminLTE 入门教程的主要内容,如果未能解决你的问题,请参考以下文章

AdminLTE快速入门和使用(网页模板快速入门使用)

adminLTE 教程 -0 基础布局

adminLTE 教程 -2 配置文件 app.js详解

adminLTE 教程 -4 轮播控件

adminLTE 教程 -7 进度条

adminLTE 教程 -6 多box