内联图表

调色板

主题颜色

主要

#007bff
禁用

次要

#6c757d
禁用

信息

#17a2b8
禁用

成功

#28a745
禁用

警告

#ffc107
禁用

危险

#dc3545
禁用
黑色/白色细微差别

黑色

#000000
禁用

深灰色

#343a40
禁用

灰色

#adb5bd
禁用

浅色

#1f2d3d
禁用
颜色

深紫色

#6610f2
禁用

浅蓝色

#3c8dbc
禁用

深蓝色

#001f3f
禁用

紫色

#605ca8
禁用

紫红色

#f012be
禁用

粉色

#e83e8c
禁用

褐红色

#d81b60
禁用

橙色

#ff851b
禁用

绿色

#01ff70
禁用

鸭翅绿

#39cccc
禁用

橄榄色

#3d9970
禁用
警告和标注

警告

警告!
Danger 警告预览。 此警告是可忽略的。 一种奇妙的宁静占据了我的整个灵魂,就像春天的早晨,我尽情享受。
警告!
Info 警告预览。此警告是可忽略的。
警告!
Warning 警告预览。此警告是可忽略的。
警告!
Success 警告预览。此警告是可忽略的。.

标注

我是 danger 标注!

我们需要解决一个问题。 一种奇妙的宁静占据了我的整个灵魂, 我尽情享受。

我是 info 标注!

请按照以下步骤继续付款。

我是 warning 标注!

这是黄色标注。

我是 success 标注!

这是绿色标注。

标签和卡片
一种奇妙的宁静占据了我的整个灵魂,就像春天的早晨一样, 我尽情享受。 我孤身一人,感受她存在的魅力, 就像为幸福而创造的。我太快乐了,我亲爱的朋友, 沉迷在那宁静美妙,以至于忽视了我的才华。 我现在连一笔都画不出来, 但我觉得从来没有像现在一样是个伟大的艺术家。
欧洲语言同属一个语系。他们各自的存在是一个神话。 在科学、音乐、体育等方面,欧洲使用了相同的词汇。 这些语言只是在语法、发音和最常见的单词上有所不同。 每个人都意识到为什么需要一种新的通用语言: 人们可以拒绝支付昂贵的翻译费用。 要做到这一点,就必须有统一的语法、发音和更多的常用词。 如果几种语言合并在一起,结果语言的语法会比单个语言的语法更简单、更规则。
Lorem Ipsum 只是印刷和排版行业的虚拟文本。 自 15世纪以来,Lorem Ipsum 一直是该行业的标准虚拟文本, 当时一台不知名的打印机把一堆字拼凑在一起,做成了一本样书。 它不仅生存了五个世纪,而且跃进到电子排版,基本上保持不变。 20世纪60年代,随着包含 Lorem Ipsum 段落的莱斯泰特纸张的发布, 以及最近的包括 Lorem Ipsum 版本在内的 AldusPageMaker 桌面出版软件的发布, 它得到了普及。
进度条

大小不同的进度条

.progress

40% 完成 (success)

.progress-sm

20% 完成

.progress-xs

60% 完成 (warning)

.progress-xxs

60% 完成 (warning)

进度条

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

大小不同的垂直进度条

通过添加类 .vertical.progress-sm.progress-xs.progress-xxs 我们实现:

40%
100%
60%
60%

垂直进度条

通过添加类 .vertical 我们实现:

40%
20%
60%
80%
Bootstrap 手风琴 & 轮播

可折叠手风琴

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

描述

Description lists
A description list is perfect for defining terms.
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.

水平描述

Description lists
A description list is perfect for defining terms.
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.