色彩板
主题颜色
主要
#007bff
禁用
次要
#6c757d
禁用
信息
#17a2b8
禁用
成功
#28a745
禁用
警告
#ffc107
禁用
危险
#dc3545
禁用
黑白色调
黑色
#000000
禁用
深灰色
#343a40
禁用
灰色
#adb5bd
禁用
浅色
#1f2d3d
禁用
颜色
靛蓝
#6610f2
禁用
浅蓝色
#3c8dbc
禁用
海军蓝
#001f3f
禁用
紫色
#605ca8
禁用
洋红
#f012be
禁用
粉红
#e83e8c
禁用
褐红色
#d81b60
禁用
橙色
#ff851b
禁用
酸橙
#01ff70
禁用
青绿色
#39cccc
禁用
橄榄色
#3d9970
禁用
警报和标注
警报
警报！
危险警报预览。此警报可以关闭。一种美妙的宁静感已占据了我的整个灵魂，就像这美好的春晨一样，我全心全意地享受着它。警报！
信息警报预览。此警报可以关闭。警报！
警告警报预览。此警报可以关闭。警报！
成功警报预览。此警报可以关闭。标注
我是一个危险标注！
存在一个需要解决的问题。一种美妙的宁静感已占据了我的整个灵魂，就像这美好的春晨一样，我全心全意地享受着它。
我是一个信息标注！
请按照步骤继续付款。
我是一个警告标注！
这是一个黄色标注。
我是一个成功标注！
这是一个绿色标注。
卡片中的标签
标签
一种美妙的宁静感已占据了我的整个灵魂，就像这美好的春晨一样，我全心全意地享受着它。我独自一人，在这个为像我这样的灵魂而创造的地方感受到存在的魅力。我如此快乐，亲爱的朋友，如此沉浸在仅仅平静存在的奇妙感觉中，以至于我忽视了自己的才华。此刻，我无法画出一笔，但我感觉自己从未像现在这样成为一名伟大的艺术家。
欧洲语言属于同一个语系。它们各自独立的说法是一种神话。在科学、音乐、体育等方面，欧洲使用相同的词汇。这些语言只在语法、发音和最常见的词语方面有所不同。每个人都明白为什么需要一种新的通用语言：人们可以拒绝支付昂贵的翻译费用。要实现这一点，就必须拥有统一的语法、发音和更常见的词语。如果几种语言融合，那么由此产生的语言的语法将比各个语言的语法更简单、更规则。
Lorem Ipsum 仅仅是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是该行业的标准虚拟文本，当时一位不知名的印刷工拿了一块字盘，将其打乱以制作字样样本。它不仅在五个世纪中幸存下来，而且还进入了电子排版时代，基本保持不变。它在 20 世纪 60 年代随着包含 Lorem Ipsum 段落的 Letraset 胶片的发行而普及，近年来随着像 Aldus PageMaker 这样的桌面出版软件的发布，其中包含了 Lorem Ipsum 的版本。
进度条
不同尺寸的进度条
.progress
.progress-sm
.progress-xs
.progress-xxs
进度条
不同尺寸的垂直进度条
通过添加类 .vertical 和 .progress-sm、.progress-xs 或 .progress-xxs，我们可以实现
垂直进度条
通过添加类 .vertical，我们可以实现
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 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
有序列表
- 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
无样式列表
- 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.