# AdminLTE 文档 Version 2.3

## 简介

AdminLTE 是一个非常受欢迎的开源的管理仪表盘和控制面板的WebApp模板。 它是基于Bootstrap 3 的CSS框架定义的响应式HTML模板。 利用所有Bootstrap的组件对大部分使用插件进行设计和调整风格，创建出可以用作后端应用程序的用户界面一致性设计。 AdminLTE 基于模块化设计，可以很容易在其之上定制和重制。 本文档将指导您完成安装模板并探索与模板捆绑在一起的各种组件。

## 下载

AdminLTE 可以下载两种不同的版本, 每个版本都拥有不同的技能水平和用例。

### Ready

Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.

Download

### Source Code

All files including the compiled CSS. Download this version if you plan on customizing the template. Requires a LESS compiler.

Download

    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+
- All other plugins are listed below

## 几点建议

在你去看你的新的主题之前，这里有几个关于如何熟悉它的技巧：

- AdminLTE is based on Bootstrap 3. 如果您不熟悉Bootstrap，请访问他们的网站并阅读文档。 所有的Bootstrap组件都被修改为适合AdminLTE的样式，并在整个模板中提供一致的外观。 这样，我们保证您将获得最好的AdminLTE。
- Go through the pages that are bundled with the theme. 大多数模板示例页面包含有关如何创建或使用组件的快速提示，当您需要快速创建某些内容时，该组件将非常有用。
- Documentation. 我们正在努力使您的AdminLTE的经验顺利。 实现这一目标的一个方法是提供文档和支持。 如果您认为文档中缺少某些内容，请随时提出问题来告诉我们。
- Built with LESS. 这个主题使用LESS编译器来使它更容易定制和使用。 如果你知道CSS或SASS，LESS很容易学习。 没有必要学习LESS，但会在以后受益匪浅。
- Hosted on GitHub. 访问我们的GitHub存储库以查看问题，请求或贡献项目。

Note: LESS files are better commented than the compiled CSS file.

## 布局

布局主要有四个主要的部分：

- Wrapper `.wrapper`. A div that wraps the whole site.
- Main Header `.main-header`. Contains the logo and navbar.
- Sidebar `.sidebar-wrapper`. Contains the user panel and sidebar menu.
- Content `.content-wrapper`. Contains the page header and content.

#### Tip!

The starter page is a good place to start building your app if you'd like to start from scratch.

### 布局选项

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

- Fixed: use the class `.fixed` to get a fixed header and sidebar.
- Collapsed Sidebar: use the class `.sidebar-collapse` to have a collapsed sidebar upon loading.
- Boxed Layout: use the class `.layout-boxed` to get a boxed layout that stretches only to 1250px.
- Top Navigation use the class `.layout-top-nav` to remove the sidebar and have your links at the top navbar.

Note: you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.

### 皮肤

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

Skin Class | Preview
--- | ---
`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` |

## AdminLTE Javascript 选项

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

### 编辑 app.js

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

### 定义 AdminLTEOptions

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

例子

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

## 组件

#### Reminder!

AdminLTE uses all of Bootstrap 3 components. It's a good start to review the Bootstrap documentation to get an idea of the various components that this documentation does not cover.

#### Tip!

If you go through the example pages and would like to copy a component, right-click on the component and choose "inspect element" to get to the HTML quicker than scanning the HTML page.

### Main Header

Main Header包含徽标和导航栏。 引导栏的构造与Bootstrap略有不同，因为它具有Bootstrap不提供的组件。 导航栏可以以两种方式构建。 这是一个正常导航栏的例子，接下来我们将提供顶部导航布局的示例。

Main Header Example
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="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>

#### Top Nav Layout. Main Header Example.

#### Reminder!

To use this main header instead of the regular one, you must add the `layout-top-nav` class to the body tag.

Top Nav Example

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

### Sidebar

sidebar组件：本页面左边使用的侧边栏提供了侧边栏应该是什么样的例子。 边栏的构造：

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

### Control Sidebar

Control sidebar 是右侧栏。 它可以用于许多目的，非常容易创建。 侧边栏配有两种不同的显示/隐藏样式。 第一个允许侧边栏滑过内容。 第二个推送内容为边栏腾出空间。 可以通过Javascript选项来设置这些方法之一。

以下代码应放在`.wrapper` div中. 我更喜欢把它放在页脚后面。

Dark Sidebar Markup

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

Light Sidebar Markup

    <!-- 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"`添加到任何按钮，它将自动充当切换按钮。

Toggle Button Example

Sidebar Toggle Markup

    <button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button>

### Info Box

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

#### First Type of Info Boxes

Messages 1,410
Bookmarks 410
Uploads 13,648
Likes 93,139

Markup

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

#### Second Type of Info Boxes

Bookmarks 41,410
70% Increase in 30 Days
Likes 41,410
70% Increase in 30 Days
Events 41,410
70% Increase in 30 Days
Comments 41,410
70% Increase in 30 Days

Markup

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

### Box

Box组件是通过这个模板使用最广泛的组件。 您可以使用它来显示图表到只是文本块。 它有很多不同之处我们将在下面探讨的风格。

#### Default Box Markup

### Default Box Example

Label
The body of the box

    <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

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

### Default Box Example

The body of the box

### Primary Box Example

The body of the box

### Info Box Example

The body of the box

### Warning Box Example

The body of the box

### Success Box Example

The body of the box

### Danger Box Example

The body of the 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>

#### Solid Box

Solid Box是显示盒子的替代方法。 它们可以通过简单地将box-solid类添加到框组件来创建。 您也可以使用带有实体框的上下文类。

### Default Solid Box Example

The body of the box

### Primary Solid Box Example

The body of the box

### Info Solid Box Example

The body of the box

### Warning Solid Box Example

The body of the box

### Success Solid Box Example

The body of the box

### Danger Solid Box Example

The body of the 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>

#### Box Tools

Box 可以包含部署特定事件或提供简单信息的工具。 以下示例使用框的标题中的多个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>

### Collapsable

The body of the box

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

### Removable

The body of the 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 -->

### Expandable

The body of the 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中添加 labels, badges, pagination, tooltips, inputs等。 几个例子如下：

### Labels

Some Label
The body of the 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 -->

### Input

The body of the 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 -->

### Tootips on buttons

The body of the 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（）`来显式地激活collapse / remove按钮：:

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

#### Loading States

### Loading state

The body of the box

### Loading state (.box-solid)

The body of the box

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

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

### Direct Chat

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

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

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

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

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

Direct Chat Markup

    <!-- 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="../../assets/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="../../assets/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="../../assets/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`类到box中，直接与实体框进行聊天。这里有一组例子：

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

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

## 插件

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

- #### Charts

- ChartJS
- Flot
- Morris.js
- Sparkline

- #### Form Elements

- Bootstrap Slider
- Ion Slider
- Date Picker
- Date Range Picker
- Color Picker
- Time Picker
- iCheck
- Input Mask

- #### Editors

- Bootstrap WYSIHTML5
- CK Editor

- #### Other

- DataTables
- Full Calendar
- jQuery UI
- jQuery Knob
- jVector Map
- Slim Scroll
- Pace

## 浏览器支持：

AdminLTE 支持下面的浏览器:

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

Note: IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.

## 升级指南

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

### 新的文件

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

### 布局改变

1. The .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">`

### Navbar自定义下拉菜单

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

### 登录，注册和锁屏页面

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

And you should be set to go!

### 邮箱

邮箱升级包含三个不同的视图。 视图是收件箱，阅读邮件和撰写新邮件。 要使用这些视图，您应该使用提供的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

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

## 常见问题

### AdminLTE可以与Wordpress一起使用吗？

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

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

简短答案，不。 然而，网络上有叉子和教程，它提供了如何与许多不同框架集成的信息。 甚至还有一些版本的AdminLTE与jQuery ajax，AngularJS和/或MVC5 ASP .NET集成在一起。

### 如何获得新的AdminLTE版本的通知？

最好的选择是使用Almsaeed Studio上的订阅表订阅我们的邮件列表。如果这并不吸引您，您可以随时观看Github上的存储库，或者访问Almsaeed Studio，然后再进行更新和公告。

## 许可

### AdminLTE

AdminLTE是一个根据麻省理工学院许可证获得许可的开源项目。只要您在“软件的所有副本或大部分内容”中包含版权，您就可以做任何事情。归因不是必需的（尽管非常感谢）。