布局

显示标题

传统的标题元素被设计成在页面内容的肉类中发挥最佳作用。当您需要一个标题突出时,考虑使用显示标题——一个更大的、稍微有点自以为是的标题样式。

示例 1

这里你可以随便写点什么东西

示例 1

这里你可以随便写点什么东西

示例 3

这里你可以随便写点什么东西

示例 4

这里你可以随便写点什么东西

标题

所有HTML标题, <h1> 通过 <h6>,是可用的。 .h1 通过 .h6 也可以使用类,当您希望匹配标题的字体样式时但仍然希望文本显示为内联。

这是一个标题1

这里你可以随便写点什么东西

这是一个标题2

这里你可以随便写点什么东西

这是一个标题 3

这里你可以随便写点什么东西

这是一个标题 4

这里你可以随便写点什么东西

这是一个标题 5

这里你可以随便写点什么东西

这是一个标题 6

这里你可以随便写点什么东西

内联文本元素

你在这里写的文字真的很棒。

你的标题在这里。

您可以使用highlight标记 文本.

这一行文本被视为删除文本。

这段文字的意思是被认为不再准确。

这一行文本是作为文档的附加部分来处理的。

这行文本将呈现为下划线。

这一行文字的意思是被视为精美的印刷品。

这行以粗体文字呈现。

这条线用斜体字表示。

上下文文本颜色

你在这里写的文字真的很棒。

这就是一行文本

这是一行带颜色的文本

这是一条成功提示的文本

这是一条提示的文本

这是一条带警告的文本

这是一条带危险提示的文本

这是一条带黑色的文本

无序的

顺序不明确的项目列表。

  • 无须列表文本
  • 无须列表文本1
  • 无须列表文本2
  • 无须列表文本3
  • 无须列表文本4
    • 无须列表文本4.1
    • 无须列表文本4.2
    • 无须列表文本4.3
    • 无须列表文本4.4
  • 无须列表文本5
  • 无须列表文本6
  • 无须列表文本7

整齐排序

一个项目列表,其中的顺序显然是重要的。

  1. 有序列表
  2. 有序列表1
  3. 有序列表2
  4. 有序列表3
  5. 有序列表4
    1. 有序列表4.1
    2. 有序列表4.2
    3. 有序列表4.3
    4. 有序列表4.4
  6. 有序列表5
  7. 有序列表6
  8. 有序列表7

非风格化的

这只适用于子系。列表项, 这意味着您还需要为任何嵌套列表添加类。

  • 列表
  • 列表1
    • 列表1.1
  • 列表2
  • 列表3
内联的

将所有列表项放置在同一行上 display: inline-block;

  • 列表
  • 列表1
  • 列表2

其他样式

你写的文字真的很好

这是一行文本

著名的人源标题

根据需要使用文本实用工具来更改对齐方式。

这是一行文本

著名的人 源标题

这是一行文本

著名的人 源标题

描述列表

使用网格系统的预定义类(或语义混合),水平对齐术语和描述。对于较长的术语,您可以选择添加 .text-truncate 类用省略号截断文本。

描述列表
描述列表对于定义术语是完美的。
标题

内容.

内容.

标题
这是一个巨大的生命。
截断项被截断
内容
嵌套
嵌套定义列表
内容