跳到主要内容

文档

基础

此组件为所有 HTML 元素提供默认样式。

Normalize.css

Base 组件利用著名的 Normalize.css 的样式,使元素在所有浏览器中保持一致的渲染,并应用其默认样式,如颜色、外边距、字体大小等。

注意 表单按钮表格 元素默认情况下不会被标准化或设置样式。这是在其特定组件类中完成的。为了保持健壮性并避免与第三方 CSS 冲突,UIkit 尽量减少对普通 HTML 元素的应用样式。


使用 <a> 元素将文本转换为超文本。您还可以将 .uk-link 类添加到 <span> 或类似的元素中以应用默认的链接样式。有关其他样式选项,请查看 链接组件


文本级语义

以下列表简要概述了最常用的文本级语义以及如何使用它们。

元素 描述
<abbr> 使用带有标题的 abbr 元素 定义缩写。
<b> 使用 b 元素创建粗体文本。
<cite> 使用 cite 元素 定义作品的标题。
<code> 使用 code 元素 定义内联代码片段。
<del> 使用 del 元素 将文档更改标记为删除的文本。
<dfn> 使用带有标题的 dfn 元素 创建定义术语。
<em> 使用 em 元素强调文本。
<i> 使用 i 元素设置文本的一部分。
<ins> 使用 ins 元素 将文档更改标记为插入的文本。
<kbd> 使用 键盘输入元素 在浏览器默认的等宽字体中显示输入。
<mark> 使用 mark 元素 高亮显示没有语义含义的文本。
<q> 使用 q 元素 内部 的 q 元素 定义内联引用。
<s> 使用 s 元素 定义带有删除线的文本。
<samp> 使用 samp 元素 定义示例输出。
<small> 使用 small 元素 对小字文本进行弱化处理。
<span> 使用 span 元素 定义内联容器。
<strong> 使用 strong 元素 表示额外的重要性。
<sub> 使用 sub 元素 定义下标文本。
<sup> 使用 sup 元素 定义上标文本。
<u> 使用 u 元素 定义带下划线的文本。
<var> 使用 var 元素 定义变量。

嵌入内容

UIkit 中,图像和其他元素(如 <audio><canvas><img><svg><video>)默认是响应式的。如果布局变窄,它们会调整大小并保持比例。要防止此行为,请将 工具组件 中的 .uk-preserve-width 类添加到元素或任何容器。

调整浏览器窗口大小以查看图像的响应式行为。

Image
<div class="uk-width-large">
    <img src="images/photo.jpg" width="1800" height="1200" alt="Image">
</div>

段落

使用 <p> 元素创建段落。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

标题

使用 <h1><h6> 元素定义标题。

添加 .uk-h1.uk-h2.uk-h3.uk-h4.uk-h5.uk-h6 类以更改标题的大小,例如让 h1 看起来像 h3。有关其他样式选项,请查看 标题组件

h1 标题 1

h2 标题 2

h3 标题 3

h4 标题 4

h5 标题 5
h6 标题 6
<h1>h1 Heading 1</h1>
<h2>h2 Heading 2</h2>
<h3>h3 Heading 3</h3>
<h4>h4 Heading 4</h4>
<h5>h5 Heading 5</h5>
<h6>h6 Heading 6</h6>

列表

使用 <ul> 元素创建无序列表,并使用 <ol> 元素创建有序列表。<li> 元素定义列表项。有关其他样式选项,请查看 列表组件

  • 项目 1
  • 项目 2
    • 项目 1
    • 项目 2
      • 项目 1
      • 项目 2
  • 项目 3
  • 项目 4
<ul>
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Item 1</li>
            <li>Item 2
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

描述列表

使用 <dl> 元素创建描述列表。使用 <dt> 定义术语,使用 <dd> 定义描述。有关其他样式选项,请查看 描述列表组件

描述列表
描述列表定义术语及其相应的描述。
这是一个术语
这是一个描述。
这是一个术语
这是一个描述。
<dl>
    <dt>Description lists</dt>
    <dd>A description list defines terms and their corresponding descriptions.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
    <dt>This is a term</dt>
    <dd>This is a description.</dd>
</dl>

水平线

使用 <hr> 元素创建水平线。有关其他样式选项,请查看 分隔符组件

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

块引用

要在文档中引用来自其他来源的多行内容,请使用 <blockquote> 元素。

blockquote 元素表示引自另一个来源的内容,可以选择在页脚或 cite 元素中包含引文。

<blockquote cite="#">
    <p class="uk-margin-remove">The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
    <footer>Someone famous in <cite><a href="#">Source Title</a></cite></footer>
</blockquote>

预格式化文本

对于多行代码,请使用 <pre> 元素。它创建一个新的文本块,保留空格、制表符和换行符。在其中嵌套一个 <code> 元素以定义代码块。

注意 请确保转义任何尖括号,以确保封闭的代码不会被解释为标记。

// Code example
<div id="myid" class="myclass" hidden>
    Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit.
</div>
<pre><code>// Code example
&lt;div id="myid" class="myclass" hidden&gt;
    Lorem ipsum &lt;strong&gt;dolor&lt;/strong&gt; sit amet, consectetur adipiscing elit.
&lt;/div&gt;</code></pre>