跳过至主要内容

文档

标题

为标题定义不同的样式。

将此组件与文本组件组合以设置标题的样式。

尺寸修饰符

添加以下类之一以修改标题的大小和样式。通常，这些类将用于标题元素，但它们也适用于任何其他元素，例如div元素。请注意，这些类从基础组件向上扩展标题类，最小的修饰符在h1元素之后拾取大小。

类 描述
.uk-heading-small 添加此类以应用小型标题。
.uk-heading-medium 添加此类以应用中型标题。
.uk-heading-large 添加此类以应用大型标题。
.uk-heading-xlarge 添加此类以应用超大型标题。
.uk-heading-2xlarge 添加此类以应用超超大型标题。
.uk-heading-3xlarge 添加此类以应用超超超大型标题。 
<h1 class="uk-heading-medium"></h1>

  • 小型

    中型

    大型

    超大型

    超超大型

    超超超大型

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