AdminLTE Javascript 选项

组件

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.

主标题

The main header contains the logo and navbar. Construction of the

navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide.

The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for

the top nav layout.

主标题示例

AdminLTE

切换导航

4

You have 4 messages

Support Team

5 mins

Why not buy a new awesome theme?

查看所有消息

10

You have 10 notifications

5 new members joined today

全部

9

You have 9 tasks

设计按钮

20%

20% Complete

查看所有任务

Alexander Pierce

Alexander Pierce - Web Developer

Member since Nov. 2012

花朵

销量

好友

设置

退出

AdminLTE

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

AdminLTE

Link (current)

Link

Dropdown

Action

Another action

Something else here

Separated link

One more separated link

Link

Dropdown

Action

Another action

Something else here

Separated link

侧边栏

The sidebar used in this page to the left provides an example of what your sidebar should like.

Construction of a sidebar:

弹出侧边栏

Control sidebar is the right side bar. It can be used for many purposes and is extremely easy

to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to

slide over the content. The second pushes the content to make space for the sidebar. Either of

these methods can be set through the Javascript options.

The following code should be placed within the .wrapper div. I prefer

to place it right after the footer.

深色侧边栏

浅色侧边栏

Once you create the sidebar, you will need a toggle button to open/close it.

By adding the attribute data-toggle="control-sidebar" to any button, it will

automatically act as the toggle button.

切换按钮实例

Toggle Right Sidebar

切换侧边栏

Toggle Right Sidebar

信息盒子

Info boxes are used to display statistical snippets. There are two types of info boxes.

第一种风格

Messages

1,410

Bookmarks

410

Uploads

13,648

Likes

93,139

标签

第二种风格

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

标签

The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the

first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.

盒子

The box component is the most widely used component through out this template. You can

use it for anything from displaying charts to just blocks of text. It comes in many different

styles that we will explore below.

默认盒子示例

Default Box Example

Label

The body of the box

The footer of the box

各种样式的盒子

You can change the style of the box by adding any of the contextual classes.

默认

The body of the box

主要

The body of the box

消息

The body of the box

警告

The body of the box

成功

The body of the box

危险

The body of the box

Solid Box

Solid Boxes are alternative ways to display boxes.

They can be created by simply adding the box-solid class to the box component.

You may also use contextual classes with you solid boxes.

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

Box Tools

Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use

of multiple AdminLTE components within the header of the box.

AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons

are placed in the box-tools which is placed in the box-header.

Collapsable

The body of the box

Removable

The body of the box

Expandable

The body of the box

We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:

Labels

Some Label

The body of the box

Input

The body of the box

Tootips on buttons

The body of the box

If you inserted a box into the document after app.js was loaded, you have to activate

the collapse/remove buttons explicitly by calling .activateBox():

Loading States

Loading state

The body of the box

Loading state (.box-solid)

The body of the box

To simulate a loading state, simply place this code before the .box closing tag.

Direct Chat

The direct chat widget extends the box component to create a beautiful chat interface. This widget

consists of a required messages pane and an optional contacts pane. Examples:

Direct Chat

3

Alexander Pierce

23 Jan 2:00 pm

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

Sarah Bullock

23 Jan 2:05 pm

You better believe it!

Count Dracula

2/28/2015

How have you been? I was...

Send

Direct Chat

3

Alexander Pierce

23 Jan 2:00 pm

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

Sarah Bullock

23 Jan 2:05 pm

You better believe it!

Count Dracula

2/28/2015

How have you been? I was...

Send

Direct Chat

3

Alexander Pierce

23 Jan 2:00 pm

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

Sarah Bullock

23 Jan 2:05 pm

You better believe it!

Count Dracula

2/28/2015

How have you been? I was...

Send

Direct Chat

3

Alexander Pierce

23 Jan 2:00 pm

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

Sarah Bullock

23 Jan 2:05 pm

You better believe it!

Count Dracula

2/28/2015

How have you been? I was...

Send

Direct Chat Markup

Of course you can use direct chat with a solid box by adding the class solid-box to the box. Here are a couple of examples:

Direct Chat in a Solid Box

3

Alexander Pierce

23 Jan 2:00 pm

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

Sarah Bullock

23 Jan 2:05 pm

You better believe it!

Count Dracula

2/28/2015

How have you been? I was...

Send

Direct Chat in a Solid Box

3

Alexander Pierce

23 Jan 2:00 pm

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

Sarah Bullock

23 Jan 2:05 pm

You better believe it!

Count Dracula

2/28/2015

How have you been? I was...

Send