AdminLTE 2 | 文档

AdminLTE 是一个流行开源的后台管理框架。基于Bootstrap 3 响应式 HTML 模板。在设计中使用了所有Bootstrap组件，并重新编写了许多常用的插件，以创建一个可以用作后端程序的用户界面。 AdminLTE 基于模块化的设计，使得它可以轻松地定制和构建。本文档将指导您安装及如何使用各种组件。

AdminLTE提供了两种版本，你可以根据需要下载，以适应你的要求。

已编译版

已编译的，并且准备在生产中使用。如果你不需要 AdminLTE LESS 文件，请下载此版本。

下载

源码版

所有文件，包含已编译CSS文件，如果你需要自定义模板，请下载此版本。需要 LESS 编译器。

下载

源代码包中的文件层次结构

AdminLTE/
├── dist/
│   ├── CSS/
│   ├── JS
│   ├── img
├── build/
│   ├── less/
│   │   ├── AdminLTE's Less 文件
│   └── Bootstrap-less/（仅供参考，未进行任何修改）
│       ├── mixins/
│       ├── variables.less
│       ├── mixins.less
└── plugins/
    ├── 自定义插件 CSS，JS 文件

AdminLTE依赖于两个主要框架。下载包中包含这两个库，所以你不需要手动下载它们。

Bootstrap 3
jQuery 1.11+
下面列出了其他的所有插件

在你去看新主题之前，这里有些实用技巧：

AdminLTE 基于Bootstrap 3。 如果你不熟悉 Bootstrap，请访问其网站并阅读文档。所有 Bootstrap 组件都被修改过以适用于AdminLTE风格，统一的模板风格将保证您获得最好的AdminLTE。
浏览与主题相关的页面。 大多数模板示例都包含了如何创建和使用组件；当你需要创建某些内容时，这将会很有用。
文档。 我们正在努力让您使用AdminLTE更方便。实现这一目标的方法是提供支持文档。如果您认为文档中缺少某些内容，不要犹豫，创建一个问题（issue）来告诉我们。
内置LESS。 主题使用 LESS 编译器使它更易于自定义和使用。如果你知道CSS或SASS的话，LESS很容易学习；学习 LESS这会让你在以后受益匪浅。
托管在GitHub上GitHub。访问我们的GitHub仓库，查看问题，请求或贡献项目。

提示：LESS文件中的注释好于编译过的CSS文件。

布局由四个主要部分组成：

包裹 .wrapper。包裹整站的 div 标签。
主标题 .main-header。包含LOGO和导航。
侧边栏 .sidebar-wrapper。包含用户面板和侧边栏菜单。
内容 .content-wrapper。包含页标题和内容。

提示！

如果你想从头开始，起始页是构建应用程序的好地方。

布局设置

AdminLTE 2.0提供了一组应用于布局的选项。这将些类添加body标签中，以得到想要的效果。

固定： 使用类 .fixed将固定页眉和侧边栏。
折叠侧边栏： 使用类 .sidebar-collapse将在加载时折叠侧边栏。
盒子布局： 使用类 .layout-boxed将得到 1250px的盒子布局。
顶部导航 使用类 .layout-top-nav将移除侧边栏，并将你的链接移到顶部导航栏。

提示：除了，不能将 layout-boxed 和 fixed 混用外，其他的都可以。

皮肤

皮肤可以在 dist/css/skins 目录中找到。选择所需的皮肤文件，然后将相应的类添加到 body 标签中, 以更改模板的皮肤。下面是可用外观的列表：

皮肤类	预览
`skin-blue`
`skin-blue-light`
`skin-yellow`
`skin-yellow-light`
`skin-green`
`skin-green-light`
`skin-purple`
`skin-purple-light`
`skin-red`
`skin-red-light`
`skin-black`
`skin-black-light`

通过修改app.js文件，来配置AdminLTE。方法如下：

编辑 app.js

在JS文件中修改$.AdminLTE.options 对象以适用你的项目。

定义 AdminLTEOptions

或者，您可以定义一个名为AdminLTEOptions全局变量，并在加载 app.js 之前对其进行初始化。

示例

<script>
  var AdminLTEOptions = {
    //启用迷你侧边栏并固定
    //如果固定布局和迷你侧边栏启用，
    //则此选项被强制为真
    sidebarExpandOnHover: true,
    //BoxRefresh 插件
    enableBoxRefresh: true,
    //Bootstrap.js 提示工具
    enableBSToppltip: true
  };
</script>
<script src="dist/js/app.js" type="text/javascript"></script>

AdminLTE 可用选项

{
  //将 slimscroll 添加到导航栏菜单
  //你需要加载 slimscroll 插件
  //在所有页面前加载 app.js
  navbarMenuSlimscroll: true,
  navbarMenuSlimscrollWidth: "3px", //滚动条的宽度
  navbarMenuHeight: "200px", //内部菜单的高度
  //一般为JS动画速度，如框折叠/展开和侧边栏向上/向下滑动。
  //单位为毫秒，
  //或者使用 'fast', 'normal', 或 'slow'
  animationSpeed: 500,
  //侧边栏菜单按钮选择器
  sidebarToggleSelector: "[data-toggle='offcanvas']",
  // 激活侧边栏推菜单
  sidebarPushMenu: true,
  //激活边栏（需要SlimScroll插件）
  sidebarSlimScroll: true,
  //启用迷你侧边栏并固定
  //如果固定布局和迷你侧边栏启用，
  //则此选项被强制为真
  sidebarExpandOnHover: false,
  //BoxRefresh 插件
  enableBoxRefresh: true,
  //Bootstrap.js 提示工具
  enableBSToppltip: true,
  BSTooltipSelector: "[data-toggle='tooltip']",
  //启用快速单击。
  Fastclick 让触摸设备拥有等同于本地的触摸体验。
  //如果您选择启用该插件，
  //请确保在 AdminLTE app.js 前加载了该脚本
  enableFastclick: true,
  //控制栏树视图
  enableControlTreeView: true,
  //控制栏配置
  enableControlSidebar: true,
  controlSidebarOptions: {
    //哪个按钮触发打开/关闭事件
    toggleBtnSelector: "[data-toggle='control-sidebar']",
    //侧边栏选择器
    selector: ".control-sidebar",
    //启用幻灯片内容
    slide: true
  },
  //Box 小部件插件。启用这个插件
  //允许折叠和（或）删除
  enableBoxWidget: true,
  //Box 小部件配置
  boxWidgetOptions: {
    boxWidgetIcons: {
      //折叠图标
      collapse: 'fa-minus',
      //展开图标
      open: 'fa-plus',
      //删除图标
      remove: 'fa-times'
    },
    boxWidgetSelectors: {
      //删除按钮选择器
      remove: '[data-widget="remove"]',
      //折叠按钮选择器
      collapse: '[data-widget="collapse"]'
    }
  },
  //聊天插件配置
  directChat: {
    //默认启用聊天
    enable: true,
    //这个选择器用于控制打开或关闭联系人面板
    contactToggleSelector: '[data-widget="chat-pane-toggle"]'
  },
  //定义一组在网站上使用的颜色
  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"
  },
  //bootstrap使用的标准屏幕大小。
  //如果你修改了variables.less 文件，
  //需要同步修改这里。
  screenSizes: {
    xs: 480,
    sm: 768,
    md: 992,
    lg: 1200
  }
}

提醒！

AdminLTE使用所有Bootstrap 3组件。查看Bootstrap 文档以了解本文档不包含的各种组件，这将是个很好的开始。

提示！

如果复制这些组件，请右击组件，并选择“检查元素” 这将比查看源码要快得多。

主标题

主标题包含LOGO导航。导航栏与Bootstrap略有不同，它有Bootstrap不提供的组件。导航栏有两种方式构建。这是一个正常的导航栏例子，接下来我们将提供顶部导航布局的示例。

主标题示例

AdminLTE

<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="用户图像">
                    </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>
                      设计一些按钮
                      <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="#">查看所有任务</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="用户图像">
            <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="用户图像">
              <p>
                Alexander Pierce - Web 开发人员
                <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>

顶部导航布局，主标题示例

提醒！

要使用主标题而不是常规标题，需要将layout-top-nav类添加到body 标签中。

顶部导航示例

<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="搜索">
        </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="用户图像">
      </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="搜索...">
        <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 -->

控制栏右侧。它的用途很广且很容易创建。侧边栏有显示/隐藏样式。对于第1个，是滑过内容，不占用空间。另外一个，将占用空间。通过Javascript 选项进行设置。

下面代码放在.wrapper div 中。我喜欢放在页面底部。

暗色侧边栏标记

<!-- 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">Toggle Right Sidebar</button>

信息框

信息框用于显示统计代码段。信息框有两种类型。

第一种信息框

消息 1,410

书签 410

上传 13,648

喜欢 93,139

标记

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

第二种信息框

书签 41,410

30天内增加70%

喜欢 41,410

30天内增加70%

活动 41,410

30天内增加70%

评论 41,410

30天内增加70%

标记

<!-- 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">
      30天内增加70%
    </span>
  </div><!-- /.info-box-content -->
</div><!-- /.info-box -->

在这些风格间切换，如果使用第一种风格，你只需要将 bg-* 类添加到图标本身；对于另一种风格，添加 bg-* 类到信息框的 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">
    内容部分
  </div><!-- /.box-body -->
  <div class="box-footer">
    底部内容
  </div><!-- box-footer -->
</div><!-- /.box -->

盒子变体

您可以通过添加box相关的类来更改样式。

默认示例

内容部分

重要消息示例

内容部分

普通样式消息示例

内容部分

警告样式消息示例

内容部分

成功样式消息示例

内容部分

危险样式消息示例

内容部分

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

实心盒子

实心盒子替换原有样式的方案。通过将box-solid 类添加到组件中，来实现效果。你也可以使用其他 box 相关的类。

默认示例

内容部分

重要消息示例

内容部分

普通样式消息示例

内容部分

警告样式消息示例

内容部分

成功样式消息示例

内容部分

危险样式消息示例

内容部分

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

盒子工具

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

AdminLTE 的 data-widget 属性提供了可以折叠或移除的功能。将按钮样式放置在box-header中。

<!-- This will cause the box to be removed when clicked -->
<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="移除"><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="折叠"><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">
    内容部分
  </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">
    内容部分
  </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">
    内容部分
  </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">
    内容部分
  </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="搜索...">
        <span class="glyphicon glyphicon-search form-control-feedback"></span>
      </div>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    内容部分
  </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="折叠"><i class="fa fa-minus"></i></button>
      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="移除"><i class="fa fa-times"></i></button>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    内容部分
  </div><!-- /.box-body -->
</div><!-- /.box -->

如果您在引入app.js之后添加了盒子到页面中，那么您必须通过调用.activateBox()来激活：

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

加载状态

内容部分

加载状态 (.box-solid)

内容部分

要模拟加载状态，只需将该代码放在 .box结束标记之前。

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

聊天

聊天小部件扩展了盒子组件，以创建一个漂亮的聊天界面。此小部件由必需的消息窗格和可选的联系人窗格组成。示例：

聊天

Alexander Pierce 1月23日下午2:00

难以置信，这个模板真的是免费的吗？

Sarah Bullock 1月23日下午 2:05

你要相信它！

Count Dracula 2/28/2015 你最近过得怎么样？我是...

聊天

Alexander Pierce 1月23日下午2:00

难以置信，这个模板真的是免费的吗？

Sarah Bullock 1月23日下午 2:05

你要相信它！

Count Dracula 2/28/2015 你最近过得怎么样？我是...

聊天

Alexander Pierce 1月23日下午2:00

难以置信，这个模板真的是免费的吗？

Sarah Bullock 1月23日下午 2:05

你要相信它！

Count Dracula 2/28/2015 你最近过得怎么样？我是...

聊天

Alexander Pierce 1月23日下午2:00

难以置信，这个模板真的是免费的吗？

Sarah Bullock 1月23日下午 2:05

你要相信它！

Count Dracula 2/28/2015 你最近过得怎么样？我是...

聊天标记


<!-- 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 条新消息" 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="联系" 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="用户消息头像"><!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          难以置信，这个模板真的是免费的吗？
        </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="用户消息头像"><!-- /.direct-chat-img -->
        <div class="direct-chat-text">
          你要相信它！
        </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="联系人头像">
            <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="输入消息 ..." 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 类应用的盒子里，下面是示例：

实心盒子聊天

Alexander Pierce 1月23日下午2:00

难以置信，这个模板真的是免费的吗？

Sarah Bullock 1月23日下午 2:05

你要相信它！

Count Dracula 2/28/2015 你最近过得怎么样？我是...

实心盒子聊天

Alexander Pierce 1月23日下午2:00

难以置信，这个模板真的是免费的吗？

Sarah Bullock 1月23日下午 2:05

你要相信它！

Count Dracula 2/28/2015 你最近过得怎么样？我是...

AdminLTE使用以下插件。相关文档，更新或许可信息，请访问提供的链接。

AdminLTE支持以下浏览器：

IE9+
Firefox （最新）
Safari （最新）
Chrome （最新）
Opera （最新）

提示： IE9 不支持过渡或动画。模板仍会正常工作，但不会启用过渡或动画效果。

要从1.x升级到最新版本，请遵循本指南。

新文件

确保更新所有与AdminLTE相关的CSS和JS文件。否则，布局将正常使用。最重要的文件是AdminLTE.css，皮肤CSS文件和app.js。

布局调整

.wrapper div必须放在 body 标签之后，而不是放在header之后
修改div .header 为 .main-header <div class="main-header">
修改 .right-side 类为 .content-wrapper <div class="content-wrapper">
修改 .left-side 类为 .main-sidebar <div class="main-sidebar">
在导航栏中，将 .navbar-right 修改为 .navbar-custom-menu <div class="navbar-custom-menu">

导航栏自定义下拉菜单

通知菜单中的图标不需要使用 bg-* 类。会使用当前颜色，例如text-aqua或text-red。

登录，注册和锁屏页面

这些页面的HTML标记和样式有很大的变化。最好的方法是复制页面代码再修改它。

你该着手去做！

邮箱

邮箱升级包含了三个不同的页面。分别是收件箱，阅读邮件和撰写新邮件。要使用这些页面，你可以pages/mailbox目录下找到。

提示： 旧的邮箱布局已被弃用，为了便于使用新布局将在下一个版本中删除。

感谢AdminLTE用户将模板与后端框架集成，以下是部分，感谢他们：

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

注意： Almsaeed Studio不支持这些实现。但是，它们提供了将AdminLTE集成到不同框架中示例。有关AdminLTE的最新版本，请访问我们的仓库或网站。

AdminLTE可以与Wordpress一起使用吗？

AdminLTE是一个HTML模板，可以用于任何目的。但它不容易安装在Wordpress上。你需要多些努力及足够的Wordpress脚本知识。

有没有PHP框架的集成指南，如Yii或Symfony？

简短的说，没有。不过上，网络上有forks和教程，它提供了如何与框架集成的信息。甚至还有AdminLTE与jQuery ajax，AngularJS或MVC5 ASP .NET集成在一起。

如何获得新版通知？

最好的选择是使用Almsaeed Studio上的订阅来加入邮件列表。如果你对这个不感兴趣，你也可以随时查看Github 仓库，或者访问Almsaeed Studio查看更新和公告。

AdminLTE

AdminLTE是根据MIT许可证授权的开源项目。只要您在“软件的所有副本或大部分内容”中包含版权，您就可以做任何事情。署名不是必需的（尽管非常感谢）。

AdminLTE 文档 Version 2.3

已编译版

源码版

提示！

布局设置

皮肤

编辑 app.js

定义 AdminLTEOptions

AdminLTE 可用选项

提醒！

提示！

主标题

支持团队 5 分钟前

设计一些按钮 20%

顶部导航布局，主标题示例

提醒！

侧边栏

控制栏

信息框

第一种信息框

第二种信息框

盒子

默认标记

默认示例

盒子变体

默认示例

重要消息示例

普通样式消息示例

警告样式消息示例

成功样式消息示例

危险样式消息示例

实心盒子

默认示例

重要消息示例

普通样式消息示例

警告样式消息示例

成功样式消息示例

危险样式消息示例

盒子工具

可折叠

可移除

可展开

标签

输入框

按钮提示

加载状态

加载状态

加载状态 (.box-solid)

聊天

聊天

聊天

聊天

聊天

实心盒子聊天

实心盒子聊天

图表

表单元素

编辑器

其它

新文件

布局调整

导航栏自定义下拉菜单

登录，注册和锁屏页面

邮箱

AdminLTE可以与Wordpress一起使用吗？

有没有PHP框架的集成指南，如Yii或Symfony？

如何获得新版通知？

AdminLTE