UIkit3.x文档

实用效果

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

面板

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以应用不同的高度。

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

对象适合和位置

定义图像或视频的内容应如何调整大小以适合其元素。

班级 描述
.uk-object-cover 通过保持图像的纵横比来缩放图像以完全覆盖内容框。
.uk-object-contain 通过保持图像的纵横比使其宽度和高度可以容纳在内容框内来缩放图像。
.uk-object-fill 缩放图像以填充元素的内容框。
.uk-object-none 根本不缩放图像。
.uk-object-scale-down 喜欢包含，但从不放大。

笔记由于 UIki 默认情况下图像和视频是响应式的，因此在使用这些类之一时必须设置纵横比。

<img class="uk-object-cover" src="" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1">
  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <img class="uk-object-cover" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
    </div>
    <div>
        <img class="uk-object-contain" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
    </div>
</div>

要修改图像或视频在其元素内的对齐方式，请添加其中一个uk-object-position-*类。

班级 描述
.uk-object-position-top-left 对齐到左上角。
.uk-object-position-top-center 与顶部对齐。
.uk-object-position-top-right 与右上角对齐。
.uk-object-position-center-left 向左对齐。
.uk-object-position-center-center 与中心对齐。
.uk-object-position-center-right 向右对齐。
.uk-object-position-bottom-left 对齐到左下角。
.uk-object-position-bottom-center 与底部对齐。
.uk-object-position-bottom-right 与右下角对齐。

边框半径

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

Class Description
.uk-border-rounded 圆角效果
.uk-border-circle 圆形效果
.uk-border-pill 药丸形（椭圆形）效果
  • Border rounded Border circle 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>

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

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

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

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

    Multiply

    Blend Screen

    Screen

    Blend Overlay

    Overlay

    Blend Darken

    Darken

    Blend Lighten

    Lighten

    Blend Color Dodge

    Color Dodge

    Blend Color Burn

    Color Burn

    Blend Hard Light

    Hard Light

    Blend Soft Light

    Soft Light

    Blend Difference

    Difference

    Blend Exclusion

    Exclusion

    Blend Hue

    Hue

    Blend Saturation

    Saturation

    Blend Color

    Color

    Blend Luminosity

    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。