AdminLTE 入门教程_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>

常用类

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
1. .info-box
  <div class="info-box">  <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> </div>
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>  </div>  <div class="box-body"> The body of the box </div>  </div>
  注：可扩——loading,chat等
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

本文链接：https://blog.csdn.net/u014451076/article/details/51037730

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

spring报错java.sql.SQLException: The server time zone value '�й��׼ʱ��' is unrecognized or represents_gradle :-程序员宅基地

文章浏览阅读388次。数据库的url后面添加&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC例如，完整代码为：url: jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&useJDBCCompliant..._gradle :

电脑硬件——显卡_显卡分类-程序员宅基地

文章浏览阅读3.9k次，点赞20次，收藏86次。显卡的工作是负责画面的渲染和输出，例如你在玩一个大型游戏，CPU的工作是根据游戏预设的各种算法计算出接下来会发生什么，并折合成海量的数据发送给显卡，显卡再对这些数据进行计算，渲染成1帧1帧的图像，传输到显示器，从而将画面呈现在我们眼前，而且显卡是在实时计算渲染，所以对显卡性能的要求就非常高，因此这就是我们平常所说的你想打游戏，就得有一张好的显卡。而看视频就不一样了，视频资源是已经被计算好的数据，先看只负责简单处理再输出就可以了，不需要再自己计算。就类比写作业，玩游戏就是自己计算然后写在本子上，看视频就是抄作_显卡分类

点云配准经典算法ICP复现 C++ Win10 pcl1.11.1_method for registration of 3-d shapes-程序员宅基地

文章浏览阅读1.7k次，点赞4次，收藏25次。背景ICP算法是点云配准(registration)领域的主流算法，在学习过程中我尝试使用C++复现了ICP算法。我参考的是经典ICP论"P. Besl, N. McKay. ‘A Method for Registration of 3-D Shapes,’ IEEE Trans. on Pattern Analysis and Machine Intel., vol. 14, no. 2, pp. 239-256,1992"。建议论文和代码搭配阅读。环境windows10 + pcl1.11.1_method for registration of 3-d shapes

springmvc的前端控制器对css、js等进行过滤_spring 过滤js代码-程序员宅基地

文章浏览阅读3.7k次。web.xml配置如下： springm_spring 过滤js代码

游戏中任务系统设计_游戏任务种类-程序员宅基地

文章浏览阅读8.5k次，点赞2次，收藏17次。1、任务分类游戏中任务可以分为主线任务、支线任务、日常任务、周任务、节日活动任务，其中周任务和节日任务可以根据设定的日期进行开启关闭，属于重复性任务。2、游戏条件各类任务开启条件：1、玩家等级 2、玩家攻击力3、前置任务等等完成条件：玩家进行任务进度是否达成任务关闭：1、玩家领取奖励后关闭任务。2、时间过期3..._游戏任务种类

ACM / ICPC 在线OJ（Online judge）_清华大学 acm网站-程序员宅基地

文章浏览阅读6.4k次，点赞8次，收藏35次。1. codeforces codeforces(这个网站每天会有比赛，一起打CF吧！)http://codeforces.com/problemset2. topcoder:http://www.topcoder.com/challenges/3. kattis 这个网站有历年的ICPC真题 https://open.kattis.com/4. 洛谷:..._清华大学 acm网站

随便推点

oracle 查询是否包含某字符串_oracle包含某个字段-程序员宅基地

文章浏览阅读7.9k次，点赞4次，收藏9次。1、like 2、contains 3、instr 4、regexp_like_oracle包含某个字段

骨架提取之AdaLSN_线性跨度网络-程序员宅基地

文章浏览阅读1.1k次，点赞2次，收藏10次。paper:https://arxiv.org/pdf/2011.03972.pdfcode:https://github.com/sunsmarterjie/SDL-Skeleton摘要传统的物体骨架检测网络通常是手工制作的。虽然有效，但它们需要密集的先验知识来为不同粒度的对象配置具有代表性的特征。本文提出了自适应线性跨度网络(AdaLSN)，在神经架构搜索(NAS)的驱动下，自动配置和集成目标骨架检测的尺度感知特征。AdaLSN是用线性跨度理论建立的，它为多尺度深度特征融合提供了最早的解释之一_线性跨度网络