跳到主要内容

文档

标题

定义不同的标题样式。

将此组件与文本组件结合使用来设置标题样式。

尺寸修饰符

添加以下类之一来修改标题的大小和样式。 通常,这些类将用于标题元素,但它们也适用于任何其他元素,例如div元素。 请注意,这些类向上扩展了基础组件中的标题类,最小的修饰符在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>

小号

中号

大号

超大号

2 倍超大号

3 倍超大号

<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>

标题分隔符

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

项目符号修饰符

要将项目符号应用于标题,请添加.uk-heading-bullet类。 您可以将其与任何尺寸修饰符组合使用,并且它与文本对齐效果很好。

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

标题项目符号

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

线条修饰符

要将垂直居中的线条应用于标题,请添加.uk-heading-line类,并在标题元素内放置一个<span>元素。 您可以将其与任何尺寸修饰符组合使用,并且它与文本对齐效果很好。

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

标题线条

标题线条

标题线条

<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>