admin-lte3-i-frame-json_menus
/
welcome_index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | 小部件</title>
  <!-- 告诉浏览器屏幕自适应 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href=".//plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- 主题样式 -->
  <link rel="stylesheet" href=".//dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">


    <!-- 主体内容 -->
    <section class="content">
      <div class="container-fluid">

        <div class="row">
          <div class="col-md-3">
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">刷新卡片</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="card-refresh" data-source="widgets.html" data-source-selector="#card-refresh-content"><i class="fas fa-sync-alt"></i></button>
                </div>
                <!-- /.card-tools -->
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                这里是卡片内容
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <div class="d-none" id="card-refresh-content">
                刷新后的内容
            </div>
          </div>
          <!-- /.col -->
          <div class="col-md-3">
            <div class="card card-success">
              <div class="card-header">
                <h3 class="card-title">所有</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="card-refresh" data-source="widgets.html" data-source-selector="#card-refresh-content" data-load-on-init="false"><i class="fas fa-sync-alt"></i></button>
                  <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
                <!-- /.card-tools -->
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                这里是卡片内容
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
          <div class="col-md-3">
            <div class="card card-warning">
              <div class="card-header">
                <h3 class="card-title">加载状态</h3>
              </div>
              <div class="card-body">
                这里是卡片内容
              </div>
              <!-- /.card-body -->
              <!-- 正在加载（删除以下内容以停止加载） -->
              <div class="overlay">
                <i class="fas fa-2x fa-sync-alt"></i>
              </div>
              <!-- 结束加载 -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
          <div class="col-md-3">
            <div class="card card-danger">
              <div class="card-header">
                <h3 class="card-title">加载状态（暗色）</h3>
              </div>
              <div class="card-body">
                这里是卡片内容
              </div>
              <!-- /.card-body -->
              <!-- 正在加载（删除以下内容以停止加载） -->
              <div class="overlay dark">
                <i class="fas fa-2x fa-sync-alt"></i>
              </div>
              <!-- 结束加载 -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->

	   <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p>
       <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p>
	   <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p>
	   <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p>
	   <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p>
	   <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p> <p>充数内容</p>


      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

    <a id="back-to-top" href="#" class="btn btn-primary back-to-top" role="button" aria-label="Scroll to top">
      <i class="fas fa-chevron-up"></i>
    </a>
  <!-- /.content-wrapper -->


</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src=".//plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src=".//plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src=".//dist/js/adminlte.min.js"></script>
<!-- 用于演示 AdminLTE  -->
<script src=".//dist/js/demo.js"></script>
</body>
</html>