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依赖于两个主要框架。可下载的软件包包含这两个库,因此您不必手动下载它们。

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

  • 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的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不提供的组件。 导航栏可以以两种方式构建。 这是一个正常导航栏的例子,接下来我们将提供顶部导航布局的示例。

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

<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
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!

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
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!

Direct Chat in a Solid Box

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!

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

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用户,模板的多个实现方式可以轻松地与后端框架集成。 以下是其中的一些:

注意: 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是一个根据麻省理工学院许可证获得许可的开源项目。只要您在“软件的所有副本或大部分内容”中包含版权,您就可以做任何事情。归因不是必需的(尽管非常感谢)。