AdminLTE 文档 当前版本 2.3.0

简介

AdminLTE 是一个流行的开源Web应用后台管理模板。 这是一个响应式的HTML模板，基于CSS框架的Bootstrap 3. 它使用了所有的 Bootstrap 组件在其设计和风格上使用了许多常用的插件来创建一个一致的设计，可以作为一个用户界面的后端应用程序。 AdminLTE 是基于模块化的设计，这允许它可以很容易地定制和构建， 这份文件将指导你通过 安装模板，并探索与模板绑定的各种组件。

RonCoo AdminLTE --是一个完全响应式的免费开源后台管理模板。基于 AdminLTE 框架（后续会随着版本更新而更新）;使用jQuery 2.2.3版本，并引入很多优秀的第三方jQuery插件，开发者也可以改用自己熟悉的第三方插件,易于使用，并高度可定制，适合许多屏幕分辨率从小型移动设备到大型台式机，这是国内的开源模板未支持的。

Download

RonCoo AdminLTE 官方提供两种不同的版本下载，每个人不同的技能水平和使用情况。

在线预览：demo.adminlte.roncoo.com

 龙果版本文件层次结构的源代码包

AdminLTE/
├── dist/
│   ├── CSS/
│   ├── JS
│   ├── fonts
│   ├── img
├── build/
│   ├── less/
│   │   ├── AdminLTE's Less 文件
│   ├── fonts/
│   │   ├── AdminLTE's 字体 文件
│   ├── js/
│   │   ├── AdminLTE's javascript 文件
│   ├── img/
│   │   ├── AdminLTE's image 文件
│   └── Bootstrap-less/ (Only for reference. No modifications have been made)
│       ├── mixins/
│       ├── variables.less
│       ├── mixins.less
└── plugins/
    ├── 所有的自定义插件的CSS和JS文件

依赖

AdminLTE 基于两个主要框架。 下载的包中包含这两个库，所以您不必手动下载它们。

• Bootstrap 3
• jQuery 1.11+
• 所有其他插件都列在下面

这里给出一个建议

在你去看你的新的令人敬畏的主题之前，这里有一些关于如何熟悉它的技巧：

• AdminLTE 是基于 Bootstrap 3. 如果你不熟悉 Bootstrap, 请浏览他们的网站并阅读文档。 所有 Bootstrap 组件已被修改，以适应AdminLTE风格和整个模板提供一致的外观。 这样，我们保证你会得到最好的 AdminLTE。
• 通过主题捆绑的页面。 大多数模板示例页都包含如何创建或使用一个组件的快捷提示，当你需要创建一些东西时，它可以非常有用的。
• 文档。 我们正在努力与AdminLTE让你体验流畅。实现这一途径的一种方法是提供文档和支持。如果你认为文档中缺少了一些东西，请不要犹豫，创建一个问题，告诉我们关于它的问题。
• 建立 LESS. 这个主题使用LESS编译器，使它更容易定制和使用。如果你知道CSS或SASS的话LESS非常容易学。这是没有必要的专门学习，但它会受益于你很多在未来。
• 托管在GitHub. 访问我们的GitHub库中查看问题，提出要求，或有助于工程。

注: LESS 文件比直接编写CSS文件更好编写。

布局

布局由四个主要部分组成，龙果团队更具需求又新增了一个：

• Wrapper .wrapper. 一个div包裹整个网站。
• Main Header .main-header. 包含标志和导航栏。
• Sidebar .sidebar-wrapper. 包含用户面板和侧边栏菜单。
• Content .content-wrapper. 包含页面标题和内容。

布局选项

AdminLTE 2.0 提供了一组选项适用于您的主要布局。这些类中的每一个都可以添加 到身体标签，以获得所需的目标。

• 固定: 使用类 .fixed 得到固定的头和侧边栏。
• 迷你侧边栏: 使用类 .sidebar-collapse 有一个迷你的侧边栏在加载。
• 盒装布局: 使用类 .layout-boxed得到一个盒装布局延伸，只有1250px.
• 顶部导航： 使用类 .layout-top-nav去除侧边栏，只剩下顶部导航栏
• 异步加载： 使用类 .fixed.ajax-template基于固定布局，内容页使用异步加载的形式加载，不再跳转页面

注: 您不能同时使用装箱和固定两个布局。其他任何东西都可以混合在一起，异步加载是龙果新增的一种基于固定的布局

皮肤

皮肤可以在 dist/css/skins 文件夹查看。 选择要添加的皮肤文件，然后添加适当的 类到body标签，以改变模板的外观。这里是可用的皮肤列表：

AdminLTE Javascript 选项

修改AdminLTE app.js选项可以使用下列方式之一。

编辑 app.js

在主要的JavaScript文件，修改$.AdminLTE.options 对象，以适合您的用例。

定义 AdminLTE 选项

Alternatively, 您可以定义一个名为AdminLTEOptions初始化前加载app.js。

例子

<script>
  var AdminLTEOptions = {
    //使侧边栏扩展徘徊侧边栏迷你效果
    //这个选项是被迫如果真的固定布局和侧边栏迷你
    //一起使用
    sidebarExpandOnHover: true,
    //BoxRefresh Plugin
    enableBoxRefresh: true,
    //Bootstrap.js tooltip
    enableBSToppltip: true
  };
</script>
<script src="dist/js/app.js" type="text/javascript"></script>

Available AdminLTE Options

{
  //Add slimscroll to navbar menus
  //This requires you to load the slimscroll plugin
  //in every page before app.js
  navbarMenuSlimscroll: true,
  navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
  navbarMenuHeight: "200px", //The height of the inner menu
  //General animation speed for JS animated elements such as box collapse/expand and
  //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
  //'fast', 'normal', or 'slow'
  animationSpeed: 500,
  //Sidebar push menu toggle button selector
  sidebarToggleSelector: "[data-toggle='offcanvas']",
  //Activate sidebar push menu
  sidebarPushMenu: true,
  //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
  sidebarSlimScroll: true,
  //Enable sidebar expand on hover effect for sidebar mini
  //This option is forced to true if both the fixed layout and sidebar mini
  //are used together
  sidebarExpandOnHover: false,
  //BoxRefresh Plugin
  enableBoxRefresh: true,
  //Bootstrap.js tooltip
  enableBSToppltip: true,
  BSTooltipSelector: "[data-toggle='tooltip']",
  //Enable Fast Click. Fastclick.js creates a more
  //native touch experience with touch devices. If you
  //choose to enable the plugin, make sure you load the script
  //before AdminLTE's app.js
  enableFastclick: true,
  //Control Sidebar Options
  enableControlSidebar: true,
  controlSidebarOptions: {
    //Which button should trigger the open/close event
    toggleBtnSelector: "[data-toggle='control-sidebar']",
    //The sidebar selector
    selector: ".control-sidebar",
    //Enable slide over content
    slide: true
  },
  //Box Widget Plugin. Enable this plugin
  //to allow boxes to be collapsed and/or removed
  enableBoxWidget: true,
  //Box Widget plugin options
  boxWidgetOptions: {
    boxWidgetIcons: {
      //Collapse icon
      collapse: 'fa-minus',
      //Open icon
      open: 'fa-plus',
      //Remove icon
      remove: 'fa-times'
    },
    boxWidgetSelectors: {
      //Remove button selector
      remove: '[data-widget="remove"]',
      //Collapse button selector
      collapse: '[data-widget="collapse"]'
    }
  },
  //Direct Chat plugin options
  directChat: {
    //Enable direct chat by default
    enable: true,
    //The button to open and close the chat contacts pane
    contactToggleSelector: '[data-widget="chat-pane-toggle"]'
  },
  //Define the set of colors to use globally around the website
  colors: {
    lightBlue: "#3c8dbc",
    red: "#f56954",
    green: "#00a65a",
    aqua: "#00c0ef",
    yellow: "#f39c12",
    blue: "#0073b7",
    navy: "#001F3F",
    teal: "#39CCCC",
    olive: "#3D9970",
    lime: "#01FF70",
    orange: "#FF851B",
    fuchsia: "#F012BE",
    purple: "#8E24AA",
    maroon: "#D81B60",
    black: "#222222",
    gray: "#d2d6de"
  },
  //The standard screen sizes that bootstrap uses.
  //If you change these in the variables.less file, change
  //them here too.
  screenSizes: {
    xs: 480,
    sm: 768,
    md: 992,
    lg: 1200
  }
}

组件

主导航

主导航包含标志和导航栏。建设的 导航栏略有不同，因为它的组件，自举引导不提供。 导航栏中可以有两种方式构造。本例为正常的导航栏和下一步我们将提供一个例子 顶部的导航布局。

<header class="main-header">
  <a href="../../index2.html" class="logo">
    <!-- LOGO -->
    AdminLTE
  </a>
  <!-- Header Navbar: style can be found in header.less -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        <!-- Messages: style can be found in dropdown.less-->
        <li class="dropdown messages-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-envelope-o"></i>
            <span class="label label-success">4</span>
          </a>
          <ul class="dropdown-menu">
            <li class="header">You have 4 messages</li>
            <li>
              <!-- inner menu: contains the actual data -->
              <ul class="menu">
                <li><!-- start message -->
                  <a href="#">
                    <div class="pull-left">
                      <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    </div>
                    <h4>
                      Sender Name
                      <small><i class="fa fa-clock-o"></i> 5 mins</small>
                    </h4>
                    <p>Message Excerpt</p>
                  </a>
                </li><!-- end message -->
                ...
              </ul>
            </li>
            <li class="footer"><a href="#">See All Messages</a></li>
          </ul>
        </li>
        <!-- Notifications: style can be found in dropdown.less -->
        <li class="dropdown notifications-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-bell-o"></i>
            <span class="label label-warning">10</span>
          </a>
          <ul class="dropdown-menu">
            <li class="header">You have 10 notifications</li>
            <li>
              <!-- inner menu: contains the actual data -->
              <ul class="menu">
                <li>
                  <a href="#">
                    <i class="ion ion-ios-people info"></i> Notification title
                  </a>
                </li>
                ...
              </ul>
            </li>
            <li class="footer"><a href="#">View all</a></li>
          </ul>
        </li>
        <!-- Tasks: style can be found in dropdown.less -->
        <li class="dropdown tasks-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-flag-o"></i>
            <span class="label label-danger">9</span>
          </a>
          <ul class="dropdown-menu">
            <li class="header">You have 9 tasks</li>
            <li>
              <!-- inner menu: contains the actual data -->
              <ul class="menu">
                <li><!-- Task item -->
                  <a href="#">
                    <h3>
                      Design some buttons
                      <small class="pull-right">20%</small>
                    </h3>
                    <div class="progress xs">
                      <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                        <span class="sr-only">20% Complete</span>
                      </div>
                    </div>
                  </a>
                </li><!-- end task item -->
                ...
              </ul>
            </li>
            <li class="footer">
              <a href="#">View all tasks</a>
            </li>
          </ul>
        </li>
        <!-- User Account: style can be found in dropdown.less -->
        <li class="dropdown user user-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
            <span class="hidden-xs">Alexander Pierce</span>
          </a>
          <ul class="dropdown-menu">
            <!-- User image -->
            <li class="user-header">
              <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
              <p>
                Alexander Pierce - Web Developer
                <small>Member since Nov. 2012</small>
              </p>
            </li>
            <!-- Menu Body -->
            <li class="user-body">
              <div class="col-xs-4 text-center">
                <a href="#">Followers</a>
              </div>
              <div class="col-xs-4 text-center">
                <a href="#">Sales</a>
              </div>
              <div class="col-xs-4 text-center">
                <a href="#">Friends</a>
              </div>
            </li>
            <!-- Menu Footer-->
            <li class="user-footer">
              <div class="pull-left">
                <a href="#" class="btn btn-default btn-flat">Profile</a>
              </div>
              <div class="pull-right">
                <a href="#" class="btn btn-default btn-flat">Sign out</a>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>

顶部导航布局。主标题的例子

<header class="main-header">
  <nav class="navbar navbar-static-top">
    <div class="container-fluid">
    <div class="navbar-header">
      <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <i class="fa fa-bars"></i>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</header>

侧边栏

下面提供一个左边侧栏的例子，用于建设侧边栏。

<div class="main-sidebar">
  <!-- Inner sidebar -->
  <div class="sidebar">
    <!-- user panel (Optional) -->
    <div class="user-panel">
      <div class="pull-left image">
        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
      </div>
      <div class="pull-left info">
        <p>User Name</p>

        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
      </div>
    </div><!-- /.user-panel -->

    <!-- Search Form (Optional) -->
    <form action="#" method="get" class="sidebar-form">
      <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="Search...">
        <span class="input-group-btn">
          <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
        </span>
      </div>
    </form><!-- /.sidebar-form -->

    <!-- Sidebar Menu -->
    <ul class="sidebar-menu">
      <li class="header">HEADER</li>
      <!-- Optionally, you can add icons to the links -->
      <li class="active"><a href="#"><span>Link</span></a><</li>
      <li><a href="#"><span>Another Link</span></a></li>
      <li class="treeview">
        <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
        <ul class="treeview-menu">
          <li><a href="#">Link in level 2</a></li>
          <li><a href="#">Link in level 2</a></li>
        </ul>
      </li>
    </ul><!-- /.sidebar-menu -->

  </div><!-- /.sidebar -->
</div><!-- /.main-sidebar -->

控制栏

控制工具条右侧栏。它可以用于许多用途，是非常容易 创建的。侧边栏有两个不同的显示/隐藏方式。第一个允许侧边栏 幻灯片内容。第二推动内容的侧边栏的空间。无论是 那一种方法都可以通过Javascript options设置。

下面的代码应该放在.wrapper div. 我喜欢 将它放置在footer后。

暗色的侧边栏标记

<!-- The Right Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
  <!-- Content of the sidebar goes here -->
</aside>
<!-- The sidebar's background -->
<!-- This div must placed right after the sidebar for it to work-->
<div class="control-sidebar-bg"></div>

亮色的擦边栏标记

<!-- The Right Sidebar -->
<aside class="control-sidebar control-sidebar-light">
  <!-- Content of the sidebar goes here -->
</aside>
<!-- The sidebar's background -->
<!-- This div must placed right after the sidebar for it to work-->
<div class="control-sidebar-bg"></div>

一旦你创建工具，你将需要一个切换按钮打开/关闭它。 通过添加属性data-toggle="control-sidebar"的按钮，它会 自动作为切换按钮。

切换按钮的例子

侧边栏切换标记

<button class="btn btn-default" data-toggle="control-sidebar">切换右侧边栏</button>

信息盒

用于显示统计片断信息框。有两种类型的信息框。

第一类信息框

标记

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

第二类信息框

标记

<!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-red">
  <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Likes</span>
    <span class="info-box-number">41,410</span>
    <!-- The progress section is optional -->
    <div class="progress">
      <div class="progress-bar" style="width: 70%"></div>
    </div>
    <span class="progress-description">
      70% Increase in 30 Days
    </span>
  </div><!-- /.info-box-content -->
</div><!-- /.info-box -->

你需要改变这些消息盒的风格只需要改变 bg_* 类。适用于任何bg_* 类图表本身，对于其他风格，将bg_* 类添加到info-box div即可。

盒子

盒子组件是最广泛使用的组件，通过这个模板。你可以 用它来做任何从显示图表到只是块的文本。它有许多不同的 风格，我们将探讨如下。

默认盒子标记

<div class="box">
  <div class="box-header with-border">
    <h3 class="box-title">Default Box Example</h3>
    <div class="box-tools pull-right">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
      <span class="label label-primary">Label</span>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
  <div class="box-footer">
    The footer of the box
  </div><!-- box-footer -->
</div><!-- /.box -->

Box Variants

您可以添加任何上下文类来更改框的样式。

<div class="box box-default">...</div>
<div class="box box-primary">...</div>
<div class="box box-info">...</div>
<div class="box box-warning">...</div>
<div class="box box-success">...</div>
<div class="box box-danger">...</div>

固体盒

实体盒是展示盒的替代方法。 它们可以通过简单地将盒实体类添加到框组件来创建。 您也可以使用上下文类与您实体框。

<div class="box box-solid box-default">...</div>
<div class="box box-solid box-primary">...</div>
<div class="box box-solid box-info">...</div>
<div class="box box-solid box-warning">...</div>
<div class="box box-solid box-success">...</div>
<div class="box box-solid box-danger">...</div>

Box Tools

盒可以包含部署一个特定事件或提供简单信息的工具。下面的示例使用多个AdminLTE组件内的箱头。

AdminLTE data-widget 属性提供了崩溃或被删除的框。按钮 放在放置在箱头中的箱中的工具。

<!-- This will cause the box to be removed when clicked -->
<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
<!-- This will cause the box to collapse when clicked -->
<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>

<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Collapsable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->

<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Removable</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</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 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><!-- /.box -->

我们还可以添加标签、徽章、分页，工具提示，输入框中的工具很多。下面是几个例子

<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Labels</h3>
    <div class="box-tools pull-right">
      <span class="label label-default">8 New Messages</span>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->

<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Input</h3>
    <div class="box-tools pull-right">
      <div class="has-feedback">
        <input type="text" class="form-control input-sm" placeholder="Search...">
        <span class="glyphicon glyphicon-search form-control-feedback"></span>
      </div>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->

<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Tooltips on buttons</h3>
    <div class="box-tools pull-right">
      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
</div><!-- /.box -->

如果您在文档中插入了一个框 app.js 被加载，你必须激活 /删除按钮显示调用 .activateBox():

<script>
    $("#box-widget").activateBox();
</script>

Loading States

要模拟加载状态，只需将此代码放在.box 标签之前。

<div class="overlay">
  <i class="fa fa-refresh fa-spin"></i>
</div>

在线聊天

直接聊天组件扩展了框组件，以创建一个美丽的聊天界面。这个小工具 由一个所需的消息窗格和一个optional联系人窗格。实例：

Direct Chat

3

Alexander Pierce 23 Jan 2:00 pm

Is this template really for free? That's unbelievable!

Sarah Bullock 23 Jan 2:05 pm

You better believe it!

• 
  Count Dracula 2/28/2015 How have you been? I was...

Send

Direct Chat

3

Alexander Pierce 23 Jan 2:00 pm

Is this template really for free? That's unbelievable!

Sarah Bullock 23 Jan 2:05 pm

You better believe it!

• 
  Count Dracula 2/28/2015 How have you been? I was...

Send

Direct Chat

3

Alexander Pierce 23 Jan 2:00 pm

Is this template really for free? That's unbelievable!

Sarah Bullock 23 Jan 2:05 pm

You better believe it!

• 
  Count Dracula 2/28/2015 How have you been? I was...

Send

Direct Chat

3

Alexander Pierce 23 Jan 2:00 pm

Is this template really for free? That's unbelievable!

Sarah Bullock 23 Jan 2:05 pm

You better believe it!

• 
  Count Dracula 2/28/2015 How have you been? I was...

Send

直接聊天的标记

<!-- Construct the box with style you want. Here we are using box-danger -->
<!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
<!-- The contextual class should match the box, so we are using direct-chat-danger -->
<div class="box box-danger direct-chat direct-chat-danger">
  <div class="box-header with-border">
    <h3 class="box-title">Direct Chat</h3>
    <div class="box-tools pull-right">
      <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
      <!-- In box-tools add this button if you intend to use the contacts pane -->
      <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
    </div>
  </div><!-- /.box-header -->
  <div class="box-body">
    <!-- Conversations are loaded here -->
    <div class="direct-chat-messages">
      <!-- Message. Default to the left -->
      <div class="direct-chat-msg">
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-name pull-left">Alexander Pierce</span>
          <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
        </div><!-- /.direct-chat-info -->
        <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          Is this template really for free? That's unbelievable!
        </div><!-- /.direct-chat-text -->
      </div><!-- /.direct-chat-msg -->

      <!-- Message to the right -->
      <div class="direct-chat-msg right">
        <div class="direct-chat-info clearfix">
          <span class="direct-chat-name pull-right">Sarah Bullock</span>
          <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
        </div><!-- /.direct-chat-info -->
        <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          You better believe it!
        </div><!-- /.direct-chat-text -->
      </div><!-- /.direct-chat-msg -->
    </div><!--/.direct-chat-messages-->

    <!-- Contacts are loaded here -->
    <div class="direct-chat-contacts">
      <ul class="contacts-list">
        <li>
          <a href="#">
            <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
            <div class="contacts-list-info">
              <span class="contacts-list-name">
                Count Dracula
                <small class="contacts-list-date pull-right">2/28/2015</small>
              </span>
              <span class="contacts-list-msg">How have you been? I was...</span>
            </div><!-- /.contacts-list-info -->
          </a>
        </li><!-- End Contact Item -->
      </ul><!-- /.contatcts-list -->
    </div><!-- /.direct-chat-pane -->
  </div><!-- /.box-body -->
  <div class="box-footer">
    <div class="input-group">
      <input type="text" name="message" placeholder="Type Message ..." class="form-control">
      <span class="input-group-btn">
        <button type="button" class="btn btn-danger btn-flat">Send</button>
      </span>
    </div>
  </div><!-- /.box-footer-->
</div><!--/.direct-chat -->

当然，您可以通过添加类 solid-box 到框中直接与实体框进行聊天。这里有几个例子：

在一个实体框中直接聊天

3

Alexander Pierce 23 Jan 2:00 pm

Is this template really for free? That's unbelievable!

Sarah Bullock 23 Jan 2:05 pm

You better believe it!

• 
  Count Dracula 2/28/2015 How have you been? I was...

Send

Direct Chat in a Solid Box

3

Alexander Pierce 23 Jan 2:00 pm

Is this template really for free? That's unbelievable!

Sarah Bullock 23 Jan 2:05 pm

You better believe it!

• 
  Count Dracula 2/28/2015 How have you been? I was...

Send

插件

AdminLTE 使用了以下插件。对于文档、更新或许可证信息，请访问提供的链接

更新日志

下面是所有龙果团队的更新日志

2016-10-28

• ajax模式中所有js和css统一在index.html引入，不再分开页面引入。
• ajax模式中添加tab页功能，加载页面可以加载多个，通过头部tab切换，该功能只在ajax模式中存在
• 在实例中添加了一个table的实例，并做好了服务端的分页，table数据的处理等
• a标签通过添加属性target=navTab添加新开标签页功能，通过异步请求href连接页面，仅ajax模式可使用
• a标签通过添加属性target="modal"添加弹出层页面功能，并通过modal=lg \modal=ms \ modal="" 属性约定窗口大小 不设置modal属性是使用默认的大小适中的弹出层
• 新增提示窗js功能，alertMsg（"提示内容","提示类型——default--success——warning——danger 默认为default"）
• 优化右侧栏功能

2016-10-17

• /Gruntfile.js代码编译打包优化，执行 grunt 默认对less编译，对js复制处理，如果需要对js做代码质量检测，请执行grunt lint
• 根据用户反馈，添加三个新的登录注册页面实例，可以在预览地址中左边导航的实例中预览 /pages/examples/login1.html /pages/examples/login2.html /pages/examples/login3.html

2016-09-30

添加在线预览地址demo.adminlte.roncoo.com

2016-09-26

• 根据我们团队的需求，增加了Ajax的布局模式。只需要在body标签里面添加.ajax-template .fixed类即可实现。
• 增加include文件夹，用于存放ajax加载的内页文件。
• 根目录的build文件夹增加了fonts、img、js文件夹，通过grunt编译转移到dist/目录，更利于二次开发时源码目录与编译目录区分。
• Gruntfile.js 添加了grunt-contrib-connect模块，装好node编译环境后，grunt即可发起服务，在浏览器输入localhost:8000即可访问，更方便二次开发。
• 把index.html的外链的js、css和字体文件全部下载到本地的build目录下

浏览器支持

AdminLTE 支持以下浏览器：

• IE9+
• Firefox (latest)
• Safari (latest)
• Chrome (latest)
• Opera (latest)

Note: IE9不支持转换或动画。模板功能正常但在IE9不会使用动画/转换。

升级指南

从1版升级到最新版本。X，遵循本指南。

新的文件

确保你更新的所有CSS和JS有关系的AdminLTE文件。否则，布局将不会 功能正常。 最重要的文件是 AdminLTE.css, 皮肤 CSS 文件, 和 app.js.

布局的变化

1. .wrapper div must be placed immediately after the body tag rather than after the header
2. Change the .header div to .main-header <div class="main-header">
3. Change the .right-side class to .content-wrapper <div class="content-wrapper">
4. Change the .left-side class to .main-sidebar <div class="main-sidebar">
5. In the navbar, change .navbar-right to .navbar-custom-menu <div class="navbar-custom-menu">

导航栏的自定义下拉菜单

1. 图标在通知菜单不需要 bg-* 类。 他们应该被替换与上下文的文本颜色类， 如 text-aqua 或 text-red.

登录，注册和锁屏页面

有重大改变的HTML标记和风格，这些页。最好的方法是复制页面的代码，并自定义它。

And you should be set to go!

邮箱

邮箱升级到包括三个不同的视图。意见是收件箱，读邮件，并撰写新的电子邮件。使用这些视图， 你应该使用的页面/邮箱文件夹提供的HTML文件。

Note: 旧邮箱布局已经在新一个忙弃用，将由下一个版本中删除。

启动位置

由于许多AdminLTE用户，有多个模板的实现 为了便于集成与后端框架。以下是其中的一些：

• Persian RTL by Mohammad Sharifi
• Yii 2 by Tobias Munk
• Laravel by Arjay Angeles
• Laravel 5 package by Sergi Tur Badenas
• Symfony by Marc Bach
• Rails gems: adminlte2-rails by Nicolas Besnard and lte-rails (using AdminLTE sources) by Carlos at RacketLogger

Note: these implementations are not supported by Almsaeed Studio. However, they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release of AdminLTE, please visit our repository or website

FAQ

AdminLTE 可以使用WordPress?

adminlte是HTML模板，可用于任何目的。然而，它是不是可以很容易地安装WordPress。这样做将需要一些努力和足够的WordPress的脚本知识。

有PHP开发框架如Yii或symfony集成指南吗？

简短的回答，没有。但是，有 forks 和教程在网络上,提供信息如何与更多不同的框架集成。有AdminLTE与jQuery的Ajax集成如龙果集成的异步模式。

我怎么知道最新的 AdminLTE 版本?

The best option is to subscribe to our mailing list using the subscription form on Almsaeed Studio. If that's not appealing to you, you may watch the repository on Github or visit Almsaeed Studio every now and then for updates and announcements.

许可

AdminLTE

AdminLTE 是一个开源项目，授权在 MIT 许可. 这允许你做几乎任何你想要的东西，只要你包括“所有副本或软件的实质性部分的版权”，不需要（虽然非常欣赏）。