AdminLTE 文档 版本 2.3

简介

AdminLTE 是一款流行的开源 WebApp 模板，适用于管理面板和控制面板。它是一个响应式 HTML 模板，基于 CSS 框架 Bootstrap 3。它在设计中使用了所有 Bootstrap 组件，并重新设计了许多常用的插件，以创建一致的设计，可作为后端应用程序的用户界面。AdminLTE 基于模块化设计，使其易于自定义和构建。本文档将指导您完成模板的安装以及探索与模板捆绑在一起的各种组件。

下载

AdminLTE 可以下载两个不同的版本，每个版本都迎合不同的技能水平和用例。

File Hierarchy of the Source Code Package

      AdminLTE/
      ├── dist/
      │   ├── CSS/
      │   ├── JS
      │   ├── img
      ├── build/
      │   ├── less/
      │   │   ├── AdminLTE's Less files
      │   └── Bootstrap-less/ (Only for reference. No modifications have been made)
      │       ├── mixins/
      │       ├── variables.less
      │       ├── mixins.less
      └── plugins/
          ├── All the customized plugins CSS and JS files

依赖

AdminLTE 依赖于两个主要框架。可下载的包包含这两个库，因此您无需手动下载它们。

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

一点建议

在您开始使用这款全新的主题之前，以下是一些关于如何熟悉它的技巧

• AdminLTE 基于 Bootstrap 3。如果您不熟悉 Bootstrap，请访问其网站并阅读文档。所有 Bootstrap 组件都经过修改以适应 AdminLTE 的样式，并提供整个模板的一致外观。这样，我们保证您将获得 AdminLTE 的最佳体验。
• 浏览与主题捆绑在一起的页面。大多数模板示例页面都包含关于如何创建或使用组件的快速提示，这些提示在您需要快速创建某些内容时非常有用。
• 文档。我们尽力使您使用 AdminLTE 的体验尽可能顺畅。实现这一目标的一种方法是提供文档和支持。如果您认为文档中缺少某些内容，请随时创建一个问题来告诉我们。
• 使用 LESS 构建。本主题使用 LESS 编译器，使自定义和使用变得更加容易。如果您了解 CSS 或 SASS，LESS 很容易学习。学习 LESS 不是必需的，但它将来会为您带来很多好处。
• 托管在 GitHub 上。访问我们的 GitHub 代码库以查看问题，提出请求或为项目做出贡献。

注意：LESS 文件的注释比已编译的 CSS 文件更详细。

布局

布局由四个主要部分组成

• 包装器 .wrapper。一个包含整个网站的 div。
• 主标题 .main-header。包含徽标和导航栏。
• 侧边栏 .sidebar-wrapper。包含用户面板和侧边栏菜单。
• 内容 .content-wrapper。包含页面标题和内容。

布局选项

AdminLTE 2.0 提供了一组选项，可以应用于您的主布局。这些类中的每一个都可以添加到 body 标签中，以达到所需的效果。

• 固定：使用类 .fixed 以获得固定标题和侧边栏。
• 折叠侧边栏：使用类 .sidebar-collapse 在加载时拥有一个折叠的侧边栏。
• 盒状布局：使用类 .layout-boxed 以获得盒状布局，其宽度仅为 1250px。
• 顶部导航 使用类 .layout-top-nav 以移除侧边栏并将您的链接放在顶部导航栏中。

注意：您不能同时使用 layout-boxed 和 fixed。其他任何选项都可以混合使用。

皮肤

皮肤可以在 dist/css/skins 文件夹中找到。选择您想要的皮肤文件，然后将相应的类添加到 body 标签中以更改模板的外观。以下是可用皮肤的列表

AdminLTE Javascript 选项

可以通过以下方法之一修改 AdminLTE 的 app.js 选项。

编辑 app.js

在主 Javascript 文件中，修改 $.AdminLTE.options 对象以适应您的用例。

定义 AdminLTEOptions

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

示例

<script>
        var AdminLTEOptions = {
          //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: true,
          //BoxRefresh Plugin
          enableBoxRefresh: true,
          //Bootstrap.js tooltip
          enableBSToppltip: true
        };
      </script>
      <script src="dist/js/app.js" type="text/javascript"></script>

可用的 AdminLTE 选项

{
        //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 option 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 Tree Views
        enableControlTreeView: 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
        }
      }

组件

主标题

主标题包含徽标和导航栏。导航栏的构建方式与 Bootstrap 略有不同，因为它包含 Bootstrap 未提供的组件。导航栏可以通过两种方式构建。这是一个普通导航栏的示例，接下来我们将提供顶部导航布局的示例。

<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 选项 设置。

以下代码应放在 .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>

信息框

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

第一种类型的信息框

标记

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

盒子变体

您可以通过添加任何上下文类来更改盒子的样式。

<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 类添加到盒子组件即可创建它们。您也可以将上下文类与实心盒子一起使用。

      <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-tools` 中，而 `box-tools` 则放置在 `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="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 -->

我们也可以在 `box-tools` 中添加标签、徽章、分页、工具提示、输入框以及更多其他元素。以下是一些示例。

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

加载状态

要模拟加载状态，只需在 `box` 结束标签之前放置以下代码。

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

直接聊天

直接聊天小部件扩展了盒子组件，创建了一个美观的聊天界面。该小部件包含一个必需的消息窗格和一个 **可选** 的联系人窗格。示例

直接聊天

3

Alexander Pierce 23 Jan 2:00 pm

这个模板真的免费吗？太不可思议了！

Sarah Bullock 23 Jan 2:05 pm

你最好相信它！

• 
  Count Dracula 2/28/2015 最近怎么样？我...

发送

直接聊天

3

Alexander Pierce 23 Jan 2:00 pm

这个模板真的免费吗？太不可思议了！

Sarah Bullock 23 Jan 2:05 pm

你最好相信它！

• 
  Count Dracula 2/28/2015 最近怎么样？我...

发送

直接聊天

3

Alexander Pierce 23 Jan 2:00 pm

这个模板真的免费吗？太不可思议了！

Sarah Bullock 23 Jan 2:05 pm

你最好相信它！

• 
  Count Dracula 2/28/2015 最近怎么样？我...

发送

直接聊天

3

Alexander Pierce 23 Jan 2:00 pm

这个模板真的免费吗？太不可思议了！

Sarah Bullock 23 Jan 2:05 pm

你最好相信它！

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

这个模板真的免费吗？太不可思议了！

Sarah Bullock 23 Jan 2:05 pm

你最好相信它！

• 
  Count Dracula 2/28/2015 最近怎么样？我...

发送

实心盒子中的直接聊天

3

Alexander Pierce 23 Jan 2:00 pm

这个模板真的免费吗？太不可思议了！

Sarah Bullock 23 Jan 2:05 pm

你最好相信它！

• 
  Count Dracula 2/28/2015 最近怎么样？我...

发送

插件

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

浏览器支持

AdminLTE 支持以下浏览器

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

注意： IE9 不支持过渡或动画。模板将正常运行，但不会在 IE9 上使用动画/过渡。

升级指南

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

新文件

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

布局更改

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

导航栏自定义下拉菜单

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

登录、注册和锁定屏幕页面

这些页面的 HTML 标记和样式有重大变化。最好的方法是复制页面的代码并对其进行自定义。

您应该可以开始使用它了！

邮箱

邮箱进行了升级，包含三种不同的视图。这些视图是收件箱、阅读邮件和撰写新邮件。要使用这些视图，您应该使用 `pages/mailbox` 文件夹中提供的 HTML 文件。

注意： 旧的邮箱布局已弃用，并将在下一个版本中移除，请使用新的布局。

实现

感谢许多 AdminLTE 用户，该模板有多种实现方式，可以轻松地与后端框架集成。以下是一些实现方式

• 波斯语 RTL 由 Mohammad Sharifi 提供
• Yii 2 由 Tobias Munk 提供
• Laravel 由 Arjay Angeles 提供
• Laravel 5 包 由 Sergi Tur Badenas 提供
• Laravel-AdminLTE 由 Jeroen Noten 提供
• Symfony 由 Marc Bach 提供
• Rails gem: adminlte2-rails 由 Nicolas Besnard 提供，以及 lte-rails（使用 AdminLTE 源代码）由 Carlos at RacketLogger 提供
• CoPilot（带有 Vue.js 的 AdminLTE） 由Gil Ferreira 提供
• pi-hole 仪表盘 由pi-hole 提供

注意： 这些实现方式不受 Almsaeed Studio 支持。但是，它们提供了一个很好的示例，说明如何将 AdminLTE 集成到不同的框架中。有关 AdminLTE 的最新版本，请访问我们的 代码库 或 网站

常见问题

AdminLTE 可以与 Wordpress 一起使用吗？

AdminLTE 是一个 HTML 模板，可以用于任何目的。但是，它并不是为了便于在 Wordpress 上安装而设计的。这需要一些努力，以及对 Wordpress 脚本的足够了解才能做到。

是否有针对 Yii 或 Symfony 等 PHP 框架的集成指南？

简短的回答是，没有。但是，网络上有一些分支和教程提供了有关如何与许多不同框架集成的信息。甚至还有一些与 jQuery ajax、AngularJS 和/或 MVC5 ASP .NET 集成的 AdminLTE 版本。

如何收到有关 AdminLTE 新版本的通知？

最好的选择是使用 Almsaeed Studio 上的订阅表单 订阅我们的邮件列表。如果您不喜欢这种方式，您可以关注 Github 上的代码库，或者定期访问 Almsaeed Studio 以获取更新和公告。

许可证

AdminLTE

AdminLTE 是一个开源项目，根据 MIT 许可证 发布。这允许您做几乎任何您想做的事情，只要您在“软件的所有副本或任何部分”中包含版权声明。不需要署名（尽管非常感谢）。