标题元素

1. Header 概述

Header 元素是 Semantic UI Elements 集合的一部分，它提供了可单独使用或在其他组件内使用的原子化组件。标题可用作页面标题、章节标题、内容分隔符或用于强调重要内容。

来源： src/definitions/elements/header.less25-43 src/definitions/elements/header.less144-159 src/definitions/elements/header.less184-199 src/definitions/elements/header.less222-242 src/definitions/elements/header.less250-294

2. 基本结构和用法

Semantic UI 中的基本标题通过 .ui.header 类创建。标题可以包含文本内容、图标、图片和副标题。

来源： src/definitions/elements/header.less27-43 src/definitions/elements/header.less49-57 src/definitions/elements/header.less62-76 src/definitions/elements/header.less82-93 src/definitions/elements/header.less99-116

3. Header 类型

Semantic UI 提供了多种类型的标题以满足不同的设计需求

3.1 页面标题

页面标题对应于 HTML 的标题元素（h1-h5），并按相应大小显示

标题类型	CSS 类	大小
h1	h1.ui.header	最大 (基于 @h1)
h2	h2.ui.header	第二大 (基于 @h2)
h3	h3.ui.header	中等 (基于 @h3)
h4	h4.ui.header	小 (基于 @h4)
h5	h5.ui.header	最小 (基于 @h5)

来源： src/definitions/elements/header.less145-159 src/themes/default/elements/header.variables72-76

3.2 内容标题

内容标题提供可用于任何标题元素的尺寸变体

大小	CSS 类	字体大小变量
特大	.ui.huge.header	@hugeFontSize
大型	.ui.large.header	@largeFontSize
中等	.ui.medium.header	@mediumFontSize
小型	.ui.small.header	@smallFontSize
极小	.ui.tiny.header	@tinyFontSize

来源： src/definitions/elements/header.less184-199 src/themes/default/elements/header.variables72-76

3.3 副标题

副标题是独立的标题，可用于创建辅助性标题

.ui.sub.header

它们也可以使用与内容标题相同的尺寸修饰符进行尺寸调整。

来源： src/definitions/elements/header.less222-242

3.4 图标标题

图标标题提供居中布局，图标位于文本上方

.ui.icon.header

图标标题还可以包含圆形或方形图标变体。

来源： src/definitions/elements/header.less250-294

4. Header 组件

标题可以包含几个修改其外观和功能的组件

4.1 副标题文本

副标题是出现在主标题文本下方并提供补充信息的附加文本

副标题的样式为更小、更轻的字体，以区别于主标题。

来源： src/definitions/elements/header.less49-57 src/themes/default/elements/header.variables35-38

4.2 图标

标题可以包含图标

包含图标时，标题文本应包装在 .content div 中，以获得正确的间距和对齐。

来源： src/definitions/elements/header.less62-76 src/definitions/elements/header.less112-116 src/themes/default/elements/header.variables40-45

4.3 图片

与图标类似，标题可以包含图片

来源： src/definitions/elements/header.less82-93 src/definitions/elements/header.less105-109 src/themes/default/elements/header.variables47-52

5. Header 变体

Semantic UI 提供了许多标题变体以适应不同的设计需求

5.1 状态变体

已禁用

.ui.disabled.header

降低标题的不透明度以表明其已被禁用。

来源： src/definitions/elements/header.less300-302

5.2 外观变体

Inverted（反色）

.ui.inverted.header

用于深色背景，反转标题及其组件的颜色。

来源： src/definitions/elements/header.less313-330 src/themes/default/elements/header.variables144-148

颜色

可以使用 Semantic UI 的颜色类为标题着色

.ui.red.header
.ui.orange.header
.ui.yellow.header
.ui.olive.header
.ui.green.header
.ui.teal.header
.ui.blue.header
.ui.violet.header
.ui.purple.header
.ui.pink.header
.ui.brown.header
.ui.grey.header

每种颜色也有反转变体： .ui.inverted.red.header 等。

来源： src/definitions/elements/header.less337-551

5.3 布局变体

对齐

.ui.left.aligned.header
.ui.right.aligned.header
.ui.centered.header (or .ui.center.aligned.header)
.ui.justified.header

控制标题内的文本对齐。

来源： src/definitions/elements/header.less559-576

浮动

.ui.floated.header (or .ui.left.floated.header)
.ui.right.floated.header

允许标题浮动到其容器的左侧或右侧。

来源： src/definitions/elements/header.less582-592 src/themes/default/elements/header.variables150-151

贴合

.ui.fitted.header

移除标题的内边距。

来源： src/definitions/elements/header.less598-600

5.4 结构变体

分隔

.ui.dividing.header

在标题下方添加分隔线，与后续内容清晰区分。

来源： src/definitions/elements/header.less607-620 src/themes/default/elements/header.variables103-110

模块

.ui.block.header

提供实心背景和内边距，使标题更突出。

来源： src/definitions/elements/header.less627-649 src/themes/default/elements/header.variables113-125

附加

标题可以附加到其他内容块

.ui.attached.header
.ui.top.attached.header
.ui.bottom.attached.header

这会创建连接到内容块的标题。

来源： src/definitions/elements/header.less655-698 src/themes/default/elements/header.variables127-141

6. 尺寸系统

除了前面提到的特定尺寸的标题类型外，Semantic UI 还提供了一个适用于所有标题变体的统一尺寸系统

.ui.tiny.header
.ui.small.header
.ui.medium.header (default)
.ui.large.header
.ui.huge.header

此尺寸系统适用于常规标题、块标题、附加标题和子标题。

来源： src/definitions/elements/header.less704-706 src/themes/default/elements/header.variables72-76

7. 与其他组件集成

标题在 Semantic UI 组件中效果良好

7.1 标签

标题可以包含标签

来源： src/definitions/elements/header.less123-127 src/themes/default/elements/header.variables54-57

7.2 段落

标题后面紧跟段落时有特定样式

来源： src/definitions/elements/header.less130-132 src/themes/default/elements/header.variables65

8. 使用示例

以下是 Semantic UI 应用中标题的一些常见用法模式

来源： src/definitions/elements/header.less27-43 src/definitions/elements/header.less145-159 src/definitions/elements/header.less184-199

9. 定制

标题可以通过 Semantic UI 的主题系统进行广泛定制。标题的主要变量文件位于 src/themes/default/elements/header.variables。

主要的定制领域包括

文本属性：字体系列、字重、行高、文本变换
外边距和内边距
子标题样式
图标和图片属性
颜色变体
块状、附加和分隔标题的特定样式

要定制标题，请在您的主题的 header.variables 文件中覆盖这些变量。

来源： src/themes/default/elements/header.variables1-151