跳到主要内容

文档

Heading

为标题定义不同的样式。

将该组件与 Text 组件 配合使用,可为标题设置样式。

尺寸修饰符

添加下列类之一,即可修改标题的尺寸和样式。这些类通常用在标题元素上,但也可以用于 div 元素等任意其他元素。注意,这些类是在 Base 组件 的标题类基础上向上扩展的,尺寸最小的修饰符接在 h1 元素之后。

类 说明
.uk-heading-small 添加该类,应用小号标题。
.uk-heading-medium 添加该类,应用中号标题。
.uk-heading-large 添加该类,应用大号标题。
.uk-heading-xlarge 添加该类,应用超大号标题。
.uk-heading-2xlarge 添加该类,应用 2 倍超大号标题。
.uk-heading-3xlarge 添加该类,应用 3 倍超大号标题。
<h1 class="uk-heading-medium"></h1>

Small

Medium

Large

X-Large

2X-Large

3X-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>
<h1 class="uk-heading-3xlarge">3X-Large</h1>

分隔线修饰符

要为标题添加分隔线,添加 .uk-heading-divider 类。它可以与任意尺寸修饰符组合使用。

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

Heading Divider

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

圆点修饰符

要为标题添加圆点,添加 .uk-heading-bullet 类。它可以与任意尺寸修饰符组合使用,也适合与文本对齐一起使用。

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

Heading Bullet

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

线条修饰符

要为标题添加垂直居中的线条,添加 .uk-heading-line 类,并在标题元素内放置一个 <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>