AdminLTE 入门教程

注:由于最近要使用AdminLTE,文档只有英文的(而且并不是十分详细),就写一个快速入门的
官网实例:https://www.almsaeedstudio.com/themes/AdminLTE/index2.html

模板


<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Dashboardtitle>
  
  <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  
  <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
  
  <link rel="stylesheet" href="plugins/morris/morris.css">
  
  <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
  
  <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
  
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
  
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

  
  
  
head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">

  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.2.0.min.js">script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">script>

<script>
  $.widget.bridge('uibutton', $.ui.button);
script>

<script src="bootstrap/js/bootstrap.min.js">script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js">script>
<script src="plugins/morris/morris.min.js">script>

<script src="plugins/sparkline/jquery.sparkline.min.js">script>

<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js">script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js">script>

<script src="plugins/knob/jquery.knob.js">script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js">script>
<script src="plugins/daterangepicker/daterangepicker.js">script>

<script src="plugins/datepicker/bootstrap-datepicker.js">script>

<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js">script>

<script src="plugins/slimScroll/jquery.slimscroll.min.js">script>

<script src="plugins/fastclick/fastclick.js">script>

<script src="dist/js/app.min.js">script>

<script src="dist/js/pages/dashboard.js">script>

<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





      Likes
      93,139

    2. .small-box



      150


      New Orders







      More info

    3. .box


      Expandable









      The body of the box



      注:可扩——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

你可能感兴趣的:(Bootstrap)