组件

提醒！

AdminLTE使用所有Bootstrap 3组件。

查看Bootstrap 文档以了解本文档不包含的各种组件，

这将是个很好的开始。

提示！

如果复制这些组件，

请右击组件，并选择“检查元素”

这将比查看源码要快得多。

主标题

主标题包含LOGO导航。

导航栏与Bootstrap略有不同，它有Bootstrap不提供的组件。

导航栏有两种方式构建。这是一个正常的导航栏例子，

接下来我们将提供顶部导航布局的示例。

主标题示例

AdminLTE

切换导航

4

你有 4 条消息

支持团队

5 分钟前

为什么不购买一个高级模板主题？

查看所有消息

10

你有 10 条通知

今日 5 名新进会员加入

查看所有

9

你有 9 项任务

设计一些按钮

20%

20% 完成

查看所有任务

Alexander Pierce

Alexander Pierce - Web 开发人员

注册于2012年11月

关注

销售

好友

资料

退出

AdminLTE

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

提醒！

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

顶部导航示例

AdminLTE

链接 （当前）

链接

下拉菜单

操作

另一个操作

其他操作

分隔链接

分隔后的链接

链接

下拉菜单

操作

另一个操作

其他操作

分隔链接

侧边栏

示例参见，页面左侧的侧边栏。

创建侧边栏

控制栏

控制栏右侧。

它的用途很广且很容易创建。

侧边栏有显示/隐藏样式。对于第1个，是滑过内容，不占用空间。另外一个，将占用空间。

通过Javascript 选项进行设置。

下面代码放在.wrapper div 中。

我喜欢放在页面底部。

暗色侧边栏标记

亮色侧边栏标记

创建侧边栏后，

你需要一个通过按钮来控制打开或关闭它。

将属性data-toggle="control-sidebar" 添加到任何按钮上，将会自动实现控制操作。

切换按钮示例

切换右边栏

侧边栏切换标记

Toggle Right Sidebar

信息框

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

第一种信息框

消息

1,410

书签

410

上传

13,648

喜欢

93,139

标记

第二种信息框

书签

41,410

30天内增加70%

喜欢

41,410

30天内增加70%

活动

41,410

30天内增加70%

评论

41,410

30天内增加70%

标记

在这些风格间切换，如果使用第一种风格，你只需要将 bg-* 类添加到图标本身；

对于另一种风格，添加 bg-* 类到信息框的 div 中即可。

盒子

盒子组件使用很广泛。

从显示图表到文本块；

它有多种风格，下面将进行介绍。

默认标记

默认示例

标签

内容部分

底部内容

盒子变体

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

默认示例

内容部分

重要消息示例

内容部分

普通样式消息示例

内容部分

警告样式消息示例

内容部分

成功样式消息示例

内容部分

危险样式消息示例

内容部分

实心盒子

实心盒子替换原有样式的方案。

通过将box-solid 类添加到组件中，

来实现效果。你也可以使用其他 box 相关的类。

默认示例

内容部分

重要消息示例

内容部分

普通样式消息示例

内容部分

警告样式消息示例

内容部分

成功样式消息示例

内容部分

危险样式消息示例

内容部分

盒子工具

盒子中可以包含用于部署特定事件或提供简单信息的工具。

下面的示例使用了多个AdminLTE组件。

AdminLTE 的 data-widget 属性提供了可以折叠或移除的功能。

将按钮样式放置在box-header中。

可折叠

内容部分

可移除

内容部分

可展开

内容部分

我们还可以添加标签、徽章、分页，工具提示，输入框到盒子中。示例如下：

标签

一些标签

内容部分

输入框

内容部分

按钮提示

内容部分

如果您在引入app.js之后添加了盒子到页面中，

那么您必须通过调用.activateBox()来激活：

加载状态

加载状态

内容部分

加载状态 (.box-solid)

内容部分

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

聊天

聊天小部件扩展了盒子组件，

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

聊天

3

Alexander Pierce

1月23日 下午2:00

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

Sarah Bullock

1月23日 下午 2:05

你要相信它！

Count Dracula

2/28/2015

你最近过得怎么样？我是...

发送

聊天

3

Alexander Pierce

1月23日 下午2:00

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

Sarah Bullock

1月23日 下午 2:05

你要相信它！

Count Dracula

2/28/2015

你最近过得怎么样？我是...

发送

聊天

3

Alexander Pierce

1月23日 下午2:00

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

Sarah Bullock

1月23日 下午 2:05

你要相信它！

Count Dracula

2/28/2015

你最近过得怎么样？我是...

发送

聊天

3

Alexander Pierce

1月23日 下午2:00

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

Sarah Bullock

1月23日 下午 2:05

你要相信它！

Count Dracula

2/28/2015

你最近过得怎么样？我是...

发送

聊天标记

当然，你也可以直接将solid-box 类应用的盒子里，下面是示例：

实心盒子聊天

3

Alexander Pierce

1月23日 下午2:00

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

Sarah Bullock

1月23日 下午 2:05

你要相信它！

Count Dracula

2/28/2015

你最近过得怎么样？我是...

发送

实心盒子聊天

3

Alexander Pierce

1月23日 下午2:00

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

Sarah Bullock

1月23日 下午 2:05

你要相信它！

Count Dracula

2/28/2015

你最近过得怎么样？我是...

发送