实用效果

一些有用的实用效果集合，用于设置网页内容的样式。

面板

UIkit使用面板来确定内容的某些部分，可以将它们放在Grid 组件的网格列中。.

添加.uk-panel class到 <div>元素中以创建位置上下文（context），将box-sizing设置为border-box，应用clearfix清除浮动并删除其最后一个子元素的底部margin。

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

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

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

<div class="uk-child-width-1-3@s" uk-grid>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
</div>

可滚动面板

添加.uk-panel-scrollable class以使面板具有固定的高度，并使其内容超过它的高度时可以滚动。您也可以添加一个.uk-height-* class以应用不同的高度。

- Category 1
- Category 2
  - Category 2.1
  - Category 2.2
  - Category 2.3
    - Category 2.3.1
    - Category 2.3.2
  - Category 2.4
- Category 3
- Category 4

<div class="uk-panel uk-panel-scrollable">
    <ul class="uk-list">
        <li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
        <li>
            <label><input class="uk-checkbox" type="checkbox"> Category 2</label>
            <ul>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
                <li>
                    <label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
                    <ul>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
                    </ul>
                </li>
                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
            </ul>
        </li>
        <li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
        <li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
    </ul>

</div>

浮动和清除浮动

浮动元素会脱离文档流，并对齐到它的容器的左侧或右侧。清除浮动是非常必要的，否则您可能会得到排版混乱的网页。以下class将帮助您设置基本布局。

Class	Description
`.uk-float-left`	将元素浮动到左侧。
`.uk-float-right`	将元素浮动到右侧。
`.uk-clearfix`	添加到父容器中以清除浮动。或者你也可以新建一个格式块并为它添加`.uk-overflow-hidden` class。

Right

Left

<div class="uk-clearfix">
    <div class="uk-float-right">
        <div class="uk-card uk-card-default uk-card-body">Right</div>
    </div>
    <div class="uk-float-left">
        <div class="uk-card uk-card-default uk-card-body">Left</div>
    </div>
</div>

溢出

以下实用效果提供了各种的class来修饰元素溢出行为的效果。

Class	Description
`.uk-overflow-hidden`	内容超出其容器时进行裁剪
`.uk-overflow-auto`	内容超出容器时添加水平或垂直的滚动条

Note 当需要处理响应网站上的表格（table）时，.uk-overflow-auto class非常有用，因为有时候表格会过大。它还可以用于 <pre> 元素。

Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data

<div class="uk-overflow-auto uk-height-small">
    <table class="uk-table uk-table-striped uk-table-condensed uk-text-nowrap">
        <thead>
            <tr>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
                <th>Table Heading</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
                <td>Table Footer</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
    </table>
</div>

自动溢出

添加uk-overflow-auto属性以扩展元素的高度，使其能够填充满父容器全部高度。如果其内容高于展开的高度，则提供垂直滚动条。

自动溢出容器之前的内容。

自动溢出容器之后的内容。

<div class="uk-height-medium">
    <div class="js-wrapper">

        <p>Some content before the overflow auto container.</p>

        <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
            <div class="uk-grid-small" uk-grid>
                <div class="uk-width-1-2"><img src="/skin/ukv3/images/light.jpg" alt=""></div>
                <div class="uk-width-1-2"><img src="/skin/ukv3/images/dark.jpg" alt=""></div>
                <div class="uk-width-1-2"><img src="/skin/ukv3/images/photo.jpg" alt=""></div>
                <div class="uk-width-1-2"><img src="/skin/ukv3/images/photo2.jpg" alt=""></div>
            </div>
        </div>

        <p>Some content after the overflow auto container.</p>

    </div>
</div>

自动溢出通常在Modal 组件内使用。

<div id="my-id" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>

Open

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Open</a>

<div id="modal-overflow" uk-modal>
    <div class="uk-modal-dialog">

        <button class="uk-modal-close-default" type="button" uk-close></button>

        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Headline</h2>
        </div>

        <div class="uk-modal-body" uk-overflow-auto>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </div>

    </div>
</div>

可以将selContainer 和 selContent选项添加到属性中来更改目标高度。了解更多

Option	Value	Default	Description
`selContainer`	String	`.uk-modal`	提供高度的容器元素的CSS选择器。
`selContent`	String	`.uk-modal-dialog`	包裹内部内容以提供其高度的元素的CSS选择器。

尺寸调整

这里提供了各种用于调整元素尺寸的class。

Class	Description
`.uk-resize`	启用水平和垂直方向的尺寸调整。
`.uk-resize-vertical`	仅启用垂直方向的尺寸调整。

拖拽下面每个框的右下角来调整尺寸。

            
<!-- Resize vertically -->
<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>

            
<!-- Resize horizontally and vertically -->
<div uk-grid>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

<div class="uk-child-width-1-2" uk-grid>
    <div></div>
    <div></div>
</div>

<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <pre class="uk-resize-vertical">
            <code>
&lt;!-- Resize vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
    <div>
        <pre class="uk-resize">
            <code>
&lt;!-- Resize horizontally and vertically --&gt;
&lt;div uk-grid&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-child-width-1-2" uk-grid&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
            </code>
        </pre>
    </div>
</div>

显示

添加下列class之一以更改元素的显示属性。

Class	Description
`.uk-display-block`	强制元素表现为块元素。
`.uk-display-inline`	强制元素表现为内联元素。
`.uk-display-inline-block`	强制该元素的行为类似于inline-blockinline-block 元素。

Inline

下面这些class通常用于在包含图像子元素的容器内创建定位上下文（context）。容器将于图像保持相同的尺寸以及响应行为。这样，使用Position 组件放置在图片上层的内容就不会超出图片范围跑到外面。

Class	Description
`.uk-inline`	添加这个class可将inline-block应用于元素，并添加最大宽度（max-width）100%和创建位置上下文。
`.uk-inline-clip`	与`.uk-inline`相同，但是会剪切溢出的子元素。

<div class="uk-inline">
    <img alt="">
    <div class="uk-position-cover"></div>
</div>

Overlay

<div class="uk-inline">
    <img src="/skin/ukv3/images/photo.jpg" width="300" alt="">
    <div class="uk-position-medium uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>

响应对象

UIkit中的<img>, <canvas>, <audio> 和 <video>元素，默认情况下会适应其父容器的宽度。对iframe应用响应行为，请添加uk-responsive属性。对于其他元素或要应用其他响应式行为，只需添加以下class之一。

Class	Description
`.uk-responsive-width`	将响应行为应用于任意元素。它根据其父元素的宽度来调整对象的宽度，并保持本来的宽高比。
`.uk-responsive-height`	根据其父对象的高度调整对象的高度（注意不是宽度），并保持本来的宽高比。
`.uk-preserve-width`	添加此 class 避免响应式行为，保存图片原始尺寸。将它添加到父元素可以对所有子元素生效。如果你的网站集成了谷歌地图，你可能需要这个 class来固定地图哦。

<img class="uk-responsive-height" src="" alt="">

<iframe src="" width="" height="" frameborder="0" uk-responsive></iframe>

边框半径

要修改图片等元素的边框半径，添加下面的class之一。

Class	Description
`.uk-border-rounded`	圆角效果
`.uk-border-circle`	圆形效果
`.uk-border-pill`	药丸形（椭圆形）效果

<img class="uk-border-rounded" src="/skin/ukv3/images/avatar.jpg" width="200" height="200" alt="Border rounded">
<img class="uk-border-circle" src="/skin/ukv3/images/avatar.jpg" width="200" height="200" alt="Border circle">
<img class="uk-border-pill" src="/skin/ukv3/images/avatar.jpg" width="200" height="200" alt="Border pill">

盒（box）阴影

为元素应用各种盒阴影。

Class	Description
`.uk-box-shadow-small`	小尺寸的盒阴影
`.uk-box-shadow-medium`	中尺寸的盒阴影
`.uk-box-shadow-large`	大尺寸的盒阴影
`.uk-box-shadow-xlarge`	超大尺寸的盒阴影

<div class="uk-box-shadow-small"></div>

Small

Medium

Large

X-Large

<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
    <div>
        <div class="uk-box-shadow-small uk-padding">Small</div>
    </div>

    <div>
        <div class="uk-box-shadow-medium uk-padding">Medium</div>
    </div>

    <div>
        <div class="uk-box-shadow-large uk-padding">Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-xlarge uk-padding">X-Large</div>
    </div>
</div>

底部盒阴影

若要在元素底部应用盒阴影，使其看起来像是悬浮着一样，请添加.uk-box-shadow-bottom class。也可以与另一个.uk-box-shadow-*修饰class结合使用。

<div class="uk-box-shadow-bottom"></div>

Box shadow bottom

<div class="uk-box-shadow-bottom uk-box-shadow-small uk-width-1-2@s uk-text-center">
    <div class="uk-background-default uk-padding-large">
        Box shadow bottom
    </div>
</div>

鼠标悬停

要在鼠标悬停时应用阴影效果，请添加以下class之一。还可以和上一小节中的class之一结合使用用来修改鼠标悬停时的阴影大小。

Class	Description
`.uk-box-shadow-hover-small`	小尺寸的盒阴影
`.uk-box-shadow-hover-medium`	中等尺寸的盒阴影
`.uk-box-shadow-hover-large`	大尺寸的盒阴影
`.uk-box-shadow-hover-xlarge`	超大的盒阴影

<div class="uk-box-shadow-hover-small"></div>

Hover Small

Hover X-Large

Small + Hover Large

X-Large + Hover Medium

<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
    <div>
        <div class="uk-box-shadow-hover-small uk-padding">Hover Small</div>
    </div>

    <div>
        <div class="uk-box-shadow-hover-xlarge uk-padding">Hover X-Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">Small + Hover Large</div>
    </div>

    <div>
        <div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">X-Large + Hover Medium</div>
    </div>
</div>

首字下沉

将.uk-dropcap class添加到<p>元素中来实现文本首字下沉。

Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="uk-dropcap">Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Logo

使用新的.uk-logo class，可以轻松定义LOGO，例如在导航栏中。

<a class="uk-logo" href=""></a>

Logo
```
<a class="uk-logo" href="#">Logo</a>
```

在深色背景上使用时，可以添加Inverse 组件中的.uk-light class，以便将其颜色自动反转获得更好的可见性。

Logo

<div class="uk-panel uk-padding uk-background-secondary uk-light">
    <a class="uk-logo" href="#">Logo</a>
</div>

LOGO图片

您也可以将<img>元素（例如SVG）用作LOGO。

<a class="uk-logo" href="">
    <img src="" alt="">
</a>

你还可以使用Inverse 组件在浅色和深色背景上自动切换显示相应的LOGO。只需将.uk-logo-inverse class添加到备用的第二个LOGO图片。根据颜色模式，当.uk-light 或 .uk-dark class应用于父元素时，将显示反相的LOGO。

<div class="uk-light">
    <a class="uk-logo" href="">
        <img src="" alt="">
        <img class="uk-logo-inverse" src="" alt="">
    </a>
</div>

<div class="uk-child-width-expand@s" uk-grid>
    <div>
        <div class="uk-panel uk-padding uk-background-muted">
            <a class="uk-logo" href="#">
                <img src="images/logo-placeholder.svg" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" alt="">
            </a>
        </div>
    </div>
    <div>
        <div class="uk-panel uk-padding uk-background-secondary uk-light">
            <a class="uk-logo" href="#">
                <img src="images/logo-placeholder.svg" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" alt="">
            </a>
        </div>
    </div>
</div>

Note要将SVG LOGO图片作为为内联式SVG插入，请使用SVG 组件。

混合模式/Blend modes

添加以下类之一可以为背景应用将不同的混合模式。例如，比如在图像上使用这些class。您可以将它们与Overlay 组件结合使用。为了更好地理解背景混合模式是如何工作的，请看这篇CSS技巧文章。

Class	Description
`.uk-blend-multiply`	相乘（multiply）
`.uk-blend-screen`	滤色（screen）
`.uk-blend-overlay`	叠加（overlay）
`.uk-blend-darken`	变暗（darken）
`.uk-blend-lighten`	变亮（lighten）
`.uk-blend-color-dodge`	颜色减淡（dodge）
`.uk-blend-color-burn`	颜色加深（burn）
`.uk-blend-hard-light`	强光（hard light）
`.uk-blend-soft-light`	柔光（soft light）
`.uk-blend-difference`	差值（difference）
`.uk-blend-exclusion`	排除（exclusion）
`.uk-blend-hue`	色相（hue）
`.uk-blend-saturation`	饱和度（saturation）
`.uk-blend-color`	颜色（color）
`.uk-blend-luminosity`	亮度（luminosity）

<div class="uk-position-relative">
    <div class="uk-blend-multiply uk-overlay uk-overlay-primary"></div>
    <img src="" alt="">
</div>

Multiply

Screen

Overlay

Darken

Lighten

Color Dodge

Color Burn

Hard Light

Soft Light

Difference

Exclusion

Hue

Saturation

Color

Luminosity

<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-small uk-light" uk-grid>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-multiply" src="/skin/ukv3/images/dark.jpg" alt="Blend Multiply">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Multiply</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-screen" src="/skin/ukv3/images/dark.jpg" alt="Blend Screen">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Screen</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-overlay" src="/skin/ukv3/images/dark.jpg" alt="Blend Overlay">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Overlay</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-darken" src="/skin/ukv3/images/dark.jpg" alt="Blend Darken">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Darken</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-lighten" src="/skin/ukv3/images/dark.jpg" alt="Blend Lighten">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Lighten</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color-dodge" src="/skin/ukv3/images/dark.jpg" alt="Blend Color Dodge">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color Dodge</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color-burn" src="/skin/ukv3/images/dark.jpg" alt="Blend Color Burn">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color Burn</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-hard-light" src="/skin/ukv3/images/dark.jpg" alt="Blend Hard Light">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Hard Light</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-soft-light" src="/skin/ukv3/images/dark.jpg" alt="Blend Soft Light">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Soft Light</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-difference" src="/skin/ukv3/images/dark.jpg" alt="Blend Difference">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Difference</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-exclusion" src="/skin/ukv3/images/dark.jpg" alt="Blend Exclusion">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Exclusion</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-hue" src="/skin/ukv3/images/dark.jpg" alt="Blend Hue">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Hue</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-saturation" src="/skin/ukv3/images/dark.jpg" alt="Blend Saturation">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Saturation</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-color" src="/skin/ukv3/images/dark.jpg" alt="Blend Color">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Color</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-inline uk-background-primary">
            <img class="uk-blend-luminosity" src="/skin/ukv3/images/dark.jpg" alt="Blend Luminosity">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Luminosity</p>
            </div>
        </div>
    </div>
</div>

变换中心

要将元素居中放置，请添加uk-transform-center class。这对于绝对定位特别有用。

<div class="uk-inline">
    <img src="/skin/ukv3/images/light.jpg" alt="">
    <a class="uk-position-absolute uk-transform-center" style="left: 50%; top: 50%" href="#" uk-marker></a>
</div>

变换起点

要修改动画的原点（例如缩放动画的原点），请添加一个uk-transform-origin-* class。可以将其与Animation 组件结合使用。

Class	Description
`.uk-transform-origin-top-left`	过渡动画从左上方开始
`.uk-transform-origin-top-center`	过渡动画从顶部开始
`.uk-transform-origin-top-right`	过渡动画从右上方开始
`.uk-transform-origin-center-left`	过渡动画从左侧开始
`.uk-transform-origin-center-right`	过渡动画从右侧开始
`.uk-transform-origin-bottom-left`	过渡动画从左下角开始。
`.uk-transform-origin-bottom-center`	过渡动画从底部开始。
`.uk-transform-origin-bottom-right`	过渡动画从右下角开始。

<div class="uk-transform-origin-bottom-right uk-animation-scale-up"></div>

Bottom Right

Top Center

Bottom Center

<div class="uk-child-width-1-3@m" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-bottom-right uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Bottom Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-top-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Top Center</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-transform-origin-bottom-center uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Bottom Center</p>
        </div>
    </div>
</div>

禁用

要禁用任意元素的点击行为，例如<a>, <button> 或 <iframe> 元素，可以添加.uk-disabled class。

Disabled

<a class="uk-disabled uk-button uk-button-default" href="#">Disabled</a>

拖动

要将移动光标应用于要拖动的元素，请添加.uk-drag class。

<div class="uk-drag"></div>

<div class="uk-drag uk-width-small uk-padding uk-background-muted uk-text-center">
    <i uk-icon="icon: move; ratio: 2"></i>
</div>

要在上传区域上拖动文件时在其上方创建盒阴影，请添加.uk-dragover class。

UIkit3.x文档

Headline