UIkit3.x文档

基础样式

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

Normalize.css

Base组件使用著名的 Normalize.css 在所有浏览器中一致地呈现元素，并应用其默认样式，例如颜色，边距，字体大小等。

Note Form, Button 和 Table 元素默认情况下未规范化或设置样式。只由它们特定的组件class定义它们的样式。UIkit尝试对原生HTML元素应用尽可能少的样式，以保持灵活性并避免与其他第三方CSS的冲突。

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

文本级语义

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

Element Description
<abbr> 定义带有title的缩写元素。
<b> 用 b 元素创建加粗文字。
<cite> 使用 cite 元素定义引用作品的标题。
<code> 定义 内联代码段.
<del> 使用 del element标记已删除的文本。
<dfn> 使用 带有标题的dfn元素创建定义术语。
<em> 使用 em元素强调文本。
<i> 使用 i元素设置文本的一部分。
<ins> 使用 ins元素定义已经被插入文档中的文本。
<kbd> 使用 kbd元素 以浏览器的默认等宽字体显示输入。
<mark> 使用 mark元素突出显示没有语义的文本。
<q> 在使用q元素 q 元素 在 一个q元素中定义内联引用。
<s> 使用 s 标签 定义带有删除线的文本。
<samp> 使用 samp 元素定义样本文本。
<small> 使用 small 元素定义小号字体。
<span> 使用 span定义行内元素。
<strong> 使用 strong提示文字的重要性。
<sub> sub element下标文本。
<sup> sup element上标文本。
<u> u element带下划线的文本。
<var> var element表示变量的名称。

嵌入内容

默认情况下，UIkit中的图像和其他元素，例如 <audio>, <canvas>, <img>, <svg> and <video> 等等都是响应式的。 如果布局变窄，它们将调整尺寸并保持其原有比例。要想避免这种情况，可添加 实用效果 中的.uk-preserve-width class 到该元素或任何容器内。

调整浏览器的窗口大小查看下面示例图像的响应式效果。

  • Image
  • <div class="uk-width-large">
    <img src="/skin/ukv3/images/photo.jpg" 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 class来改变标题文字的大小, 比如希望让 h1标签和h3的文字大小相同。 有关其他样式选项，请查看 Heading 组件。

  • h1 Heading 1

    h2 Heading 2

    h3 Heading 3

    h4 Heading 4

    h5 Heading 5
    h6 Heading 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> 元素定义列表项。 关于其他样式选项，请查看 List 组件。

    • Item 1
    • Item 2
      • Item 1
      • Item 2
        • Item 1
        • Item 2
    • Item 3
    • Item 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> 定义描述。 相关其他样式设置选项，请查看 Description List 组件。

  • Description lists
    A description list defines terms and their corresponding descriptions.
    This is a term
    This is a description.
    This is a term
    This is a description.
  • <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> 元素创建水平线。有关其他样式设置选项，请查看 Divider 组件。

  • 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> 元素。

  • The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

  • <blockquote cite="#">
    <p class="uk-margin-small-bottom">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> 元素来定义代码块。

Note 要确保避免使用尖括号，因为尖括号会使代码被识别为页面标签代码而不能按预期显示代码。

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