标题／Heading

为标题定义各种样式。

将这个组件与 Text 组件 结合使用以设置标题样式。

尺寸

添加以下class之一以修改标题的大小和样式。这些class通常用于标题元素，但它们也可与其他任何元素（例如 div 元素）一起使用。请注意，这些类将标题类从Base组件 Base 组件 向上扩展，并且最小的修饰符将在 h1 元素之后选择大小。

Class 描述
.uk-heading-small 添加这个class应用到：小号标题
.uk-heading-medium 添加这个class应用到：中等标题
.uk-heading-large 添加这个class应用到：大号标题
.uk-heading-xlarge 添加这个class应用到：加大号标题
.uk-heading-2xlarge 添加这个class应用到：2X加加大号标题 
<h1 class="uk-heading-medium"></h1>

  • Small

    Medium

    Large

    X-Large

    2X-Large

  • <h1 class="uk-heading-small">Small</h1>
<h1 class="uk-heading-medium">Medium</h1>
<h1 class="uk-heading-large">Large</h1>
<h1 class="uk-heading-xlarge">X-Large</h1>
<h1 class="uk-heading-2xlarge">2X-Large</h1>

分隔线

使用 .uk-heading-divider class为标题添加分隔线。您可以将其与任何尺寸修饰类结合使用。

<h1 class="uk-heading-divider"></h1>

  • Heading Divider

  • <h1 class="uk-heading-divider">Heading Divider</h1>

项目修饰

若要对标题应用项目符号，请添加 .uk-heading-bullet class。您可以将它与任何大小修饰符组合使用，并且该修饰可以与文本对齐。

<h1 class="uk-heading-bullet"></h1>

  • Heading Bullet

  • <h1 class="uk-heading-bullet">Heading Bullet</h1>

标题线条

要在标题上添加线条效果，并且线条垂直居中，请添加 .uk-heading-line class，并将 <span> 放置在标题元素中。您可以将它与任何大小修饰符组合，并且它可以很好地与文本对齐方式配合使用。

<h1 class="uk-heading-line"><span></span></h1>

  • Heading Line

    Heading Line

    Heading Line

  • <h1 class="uk-heading-line"><span>Heading Line</span></h1>

<h1 class="uk-heading-line uk-text-center"><span>Heading Line</span></h1>

<h1 class="uk-heading-line uk-text-right"><span>Heading Line</span></h1>

上一篇： Grid

下一篇： Height

heading.md

# 标题／Heading

<p class="uk-text-lead">为标题定义各种样式。</p>

将这个组件与 [Text 组件](text.md) 结合使用以设置标题样式。

## Size modifiers-尺寸

添加以下class之一以修改标题的大小和样式。这些class通常用于标题元素，但它们也可与其他任何元素（例如 `div` 元素）一起使用。请注意，这些类将标题类从Base组件 [Base 组件](base.md#headings) 向上扩展，并且最小的修饰符将在 `h1` 元素之后选择大小。

| Class                 | 描述                                      |
| :-------------------- | :----------------------------------------------- |
| `.uk-heading-small`   | 添加这个class应用到：小号标题   |
| `.uk-heading-medium`  | 添加这个class应用到：中等标题  |
| `.uk-heading-large`   | 添加这个class应用到：大号标题   |
| `.uk-heading-xlarge`  | 添加这个class应用到：加大号标题  |
| `.uk-heading-2xlarge` | 添加这个class应用到：2X加加大号标题 |

```html
<h1 class="uk-heading-medium"></h1>
```

```example
<h1 class="uk-heading-small">Small</h1>
<h1 class="uk-heading-medium">Medium</h1>
<h1 class="uk-heading-large">Large</h1>
<h1 class="uk-heading-xlarge">X-Large</h1>
<h1 class="uk-heading-2xlarge">2X-Large</h1>
```

***

## Divider modifier-分隔线

使用 `.uk-heading-divider` class为标题添加分隔线。您可以将其与任何尺寸修饰类结合使用。

```html
<h1 class="uk-heading-divider"></h1>
```

```example
<h1 class="uk-heading-divider">Heading Divider</h1>
```

***

## Bullet modifier-项目修饰

若要对标题应用项目符号，请添加 `.uk-heading-bullet` class。您可以将它与任何大小修饰符组合使用，并且该修饰可以与文本对齐。

```html
<h1 class="uk-heading-bullet"></h1>
```

```example
<h1 class="uk-heading-bullet">Heading Bullet</h1>
```

***

## Line modifier-标题线条

要在标题上添加线条效果，并且线条垂直居中，请添加 `.uk-heading-line` class，并将 `<span>` 放置在标题元素中。您可以将它与任何大小修饰符组合，并且它可以很好地与文本对齐方式配合使用。

```html
<h1 class="uk-heading-line"><span></span></h1>
```

```example
<h1 class="uk-heading-line"><span>Heading Line</span></h1>

<h1 class="uk-heading-line uk-text-center"><span>Heading Line</span></h1>

<h1 class="uk-heading-line uk-text-right"><span>Heading Line</span></h1>
```