跳至主要內容

文件

標題

定義標題的不同樣式。

將此組件與 文字組件 結合,以設定標題樣式。

尺寸修飾符

加入以下其中一個類別來修改標題的大小和樣式。通常,這些類別會用於標題元素,但也適用於任何其他元素,例如 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>