常规用户界面 预览用户界面元素

  1. 首页
  2. UI
  3. 常规用户界面

调色板

主要

禁用
#3c8dbc
活动

信息

禁用
#00c0ef
活动

成功

禁用
#00a65a
活动

警告

禁用
#f39c12
活动

危险

禁用
#f56954
活动

灰色

禁用
#d2d6de
活动

深蓝色

禁用
#001F3F
活动

深青色

禁用
#39CCCC
活动

紫色

禁用
#605ca8
活动

橙色

禁用
#ff851b
活动

褐红色

禁用
#D81B60
活动

黑色

禁用
#111111
活动

警告和提醒

警告

警告！

危险样式预览，这个警告可以不理会。 一种奇妙的宁静占据了我的整个灵魂，就像春天的早晨，我尽情享受。

警告！

消息样式预览，这个警告可以不理会。

警告！

警告样式预览，这个警告可以不理会。

警告！

成功样式预览，这个警告可以不理会。

提醒

我是危险样式的提醒！

有一个我们需要解决的问题。 一种奇妙的宁静占据了我的整个灵魂，就像春天的早晨，我尽情享受。

我是消息样式的提醒！

按照步骤继续付款。

我是警告样式的提醒！

这是黄色的提醒。

我是成功样式的提醒！

这是绿色的提醒。

AdminLTE 自定义选项卡

如何使用：

与bootstrap 选项卡相同， 使用 .nav-tabs-custom 类实现这种效果。

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
如何使用：

与bootstrap 选项卡相同， 使用 .nav-tabs-custom 类实现这种效果。

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

进度条

不同大小的进度条

.progress

40% Complete (success)

类： .sm

20% 完成

类： .xs

60% Complete (warning)

类： .xxs

60% Complete (warning)

进度条

40% Complete (success)
20% 完成
60% Complete (warning)
80% 完成

不同大小的垂直进度条

通过添加类 .vertical 和 .progress-sm， .progress-xs 或 .progress-xxs 实现：

40%
100%
60%
60%

不同大小的垂直进度条

通过添加类 .vertical 实现：

40%
20%
60%
80%

Bootstrap 手风琴 & 轮播效果

可折叠手风琴效果

可折叠组项目 #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

危险样式可折叠项目

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

成功样式可折叠项目

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

轮播效果

排版

标题

h1. Bootstrap 标题

h2. Bootstrap 标题

h3. Bootstrap 标题

h4. Bootstrap 标题

h5. Bootstrap 标题
h6. Bootstrap 标题

内容强调

强调重要性

绿色强调成功

浅绿色强调信息

淡蓝色强调文本信息 （2）

红色强调文本信息

黄色强调警告信息

暗色强调一般信息

块引用

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

来自有名的人

块引用右对齐

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

来自有名的人

无序列表

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

有序列表

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

无样式列表

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

描述

描述列表
描述列表适合定义术语。
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

水平描述

描述列表
描述列表适合定义术语。
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.