跳到主要内容

文档

实用工具

一组有用的实用工具类，用于设置内容样式。

面板

UIkit 使用面板来概述内容的特定部分。 例如，这些可以从 栅格组件 中排列在栅格列中。

将 .uk-panel 类添加到 <div> 元素以创建定位上下文，将 box-sizing 设置为 border-box，应用清除浮动并删除其最后一个子元素的底部外边距。

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 类，使面板具有固定高度并使其可滚动，如果其内容超出高度。 您还可以添加一个 .uk-height-* 类来应用不同的高度。

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

清除和浮动

浮动元素从文档流中取出，并与容器的左侧或右侧对齐。 清除浮动非常重要，否则最坏的情况下，您可能会得到一个混乱的站点。 以下类将帮助您设置基本的布局。

类 描述
.uk-float-left 添加此类可将元素浮动到左侧。
.uk-float-right 添加此类可将元素浮动到右侧。
.uk-clearfix 将此类添加到父容器以清除浮动。 或者，您可以创建一个新的块格式上下文，例如通过添加 .uk-overflow-hidden 类。
右
左
<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>

溢出

这些实用工具提供了不同的类来修改元素的溢出行为。

类 描述
.uk-overflow-hidden 添加此类以剪切超出容器尺寸的内容。
.uk-overflow-auto 添加此类以创建一个容器，该容器在元素内容比容器本身更宽或更高时提供水平或垂直滚动条。

注意 .uk-overflow-auto 类在处理响应式网站上的表格时非常有用，这些表格在某些时候会变得太大。 它在 <pre> 元素上也能很好地工作。

表头 表头 表头 表头 表头 表头 表头 表头
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表尾 表尾 表尾 表尾 表尾 表尾 表尾 表尾 
<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>
        <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>
        <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>
    </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="images/light.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div>
                <div class="uk-width-1-2"><img src="images/photo2.jpg" width="1800" height="1200" alt=""></div>
            </div>
        </div>

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

    </div>
</div>

它通常在 模态组件 中使用。

<div id="my-id" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>
打开 
<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 选项来更改目标高度。 了解更多

选项 值 默认 描述
sel-container 字符串 .uk-modal 提供高度的容器元素的 CSS 选择器。
sel-content 字符串 .uk-modal-dialog 包装内部内容以提供其高度的元素的 CSS 选择器。

调整大小

这些实用工具提供了不同的类来调整元素的大小。

类 描述
.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>

显示

添加这些类之一来更改元素的显示属性。

类 描述
.uk-display-block 强制元素表现为块元素。
.uk-display-inline 强制元素表现为内联元素。
.uk-display-inline-block 强制元素表现为内联块元素。

内联

这些类通常用于在具有图像作为子元素的容器上创建位置上下文。 容器保持与图像相同的大小以及响应式行为。 这样，使用 定位组件 放置在图像顶部的内容将不会流出图像尺寸。

类 描述
.uk-inline 添加此类以将内联块行为应用于元素，添加 100% 的最大宽度并创建位置上下文。
.uk-inline-clip 与 .uk-inline 相同，它还会剪切溢出的子元素。 
<div class="uk-inline">
    <img src="" width="" height="" alt="">
    <div class="uk-position-cover"></div>
</div>
覆盖层
<div class="uk-inline">
    <img src="images/photo.jpg" width="300" height="200" 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 属性。 对于其他元素或要应用不同的行为，只需添加以下类之一。

类 描述
.uk-responsive-width 添加此类以将相同的响应式行为应用于任何其他元素。 它会根据其父元素的宽度调整对象的宽度，保持原始纵横比。
.uk-responsive-height 添加此类以根据其父元素的高度调整对象的高度（而不是其宽度），保持原始纵横比。
.uk-preserve-width 添加此类以避免默认的响应式行为并保留原始图像尺寸。 您还可以将类添加到父元素，它将应用于所有相关元素内容。 如果您将 Google 地图嵌入到您的网站中，您可能需要此功能来修复地图的图像。 
<img class="uk-responsive-height" src="" width="" height="" alt="">

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

对象适配和位置

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

类 描述
.uk-object-cover 通过保持其纵横比来缩放图像，以完全覆盖内容框。
.uk-object-contain 通过保持其纵横比来缩放图像，使其宽度和高度可以尽可能地适合内容框。
.uk-object-fill 缩放图像以填充元素的内容框。
.uk-object-none 根本不缩放图像。
.uk-object-scale-down 像 contain 一样，但永远不会向上缩放。

注意 由于图像和视频在 UIkit 中默认是响应式的，因此在使用这些类之一时必须设置纵横比。

<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-* 位置类。

类 描述
.uk-object-top-left 与左上角对齐。
.uk-object-top-center 与顶部对齐。
.uk-object-top-right 与右上角对齐。
.uk-object-center-left 与左侧对齐。
.uk-object-center-center 与中心对齐。
.uk-object-center-right 与右侧对齐。
.uk-object-bottom-left 与左下角对齐。
.uk-object-bottom-center 与底部对齐。
.uk-object-bottom-right 与右下角对齐。

边框半径

要修改元素（如图像）的边框半径，请添加以下类之一。

类 描述
.uk-border-rounded 添加此类以应用圆角。
.uk-border-circle 添加此类以应用圆形。
.uk-border-pill 添加此类以应用药丸形状。
Border rounded Border circle Border pill
<img class="uk-border-rounded" src="images/avatar.jpg" width="200" height="200" alt="Border rounded">
<img class="uk-border-circle" src="images/avatar.jpg" width="200" height="200" alt="Border circle">
<img class="uk-border-pill" src="images/avatar.jpg" width="200" height="200" alt="Border pill">

盒阴影

您可以将不同的盒阴影应用于元素。 只需添加以下类之一。

类 描述
.uk-box-shadow-small 添加此类以应用小的盒阴影。
.uk-box-shadow-medium 添加此类以应用中等的盒阴影。
.uk-box-shadow-large 添加此类以应用大的盒阴影。
.uk-box-shadow-xlarge 添加此类以应用非常大的盒阴影。 
<div class="uk-box-shadow-small"></div>
小
中
大
超大
<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 类。 这也可以与其他 .uk-box-shadow-* 修饰符之一结合使用。

<div class="uk-box-shadow-bottom"></div>
底部盒阴影
<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>

悬停

要在悬停时应用盒阴影，请添加以下类之一。 这也可以用于修改悬停时的阴影大小。 为此，只需将它们与上面的类之一结合使用。

类 描述
.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>
悬停小
悬停超大
小 + 悬停大
超大 + 悬停中
<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 类，您可以通过将其直接添加到 <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 类，您可以轻松定义徽标，例如在导航栏中。

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

当在深色背景上显示图像时，添加 反色组件 中的 .uk-light 类，使其颜色自动反转，以获得更好的可见性。

<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="" width="" height="" alt="">
</a>

您甚至可以通过使用 反色组件 来自动显示浅色和深色背景的备用 logo。只需将 .uk-logo-inverse 类添加到第二个 logo 图像即可。根据颜色模式，当 .uk-light 或 .uk-dark 类应用于父元素时，将显示反转的 logo。

<div class="uk-light">
    <a class="uk-logo" href="">
        <img src="" width="" height="" alt="">
        <img class="uk-logo-inverse" src="" width="" height="" 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="#" aria-label="Back to Home">
                <img src="images/logo-placeholder.svg" width="130" height="70" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" width="130" height="70" alt="">
            </a>
        </div>
    </div>
    <div>
        <div class="uk-panel uk-padding uk-background-secondary uk-light">
            <a class="uk-logo" href="#" aria-label="Back to Home">
                <img src="images/logo-placeholder.svg" width="130" height="70" alt="">
                <img class="uk-logo-inverse" src="images/logo-placeholder-light.svg" width="130" height="70" alt="">
            </a>
        </div>
    </div>
</div>

注意 要将 SVG logo 作为内联 SVG 注入，请使用 SVG 组件。

混合模式

添加以下类之一，以将不同的混合模式应用于您的背景，例如将其放置在图像上时。您可以将这些与 叠加组件 结合使用。要更好地理解背景混合模式的工作原理，请查看这篇 CSS Tricks 文章。

类 描述
.uk-blend-multiply 此类将混合模式设置为正片叠底。
.uk-blend-screen 此类将混合模式设置为滤色。
.uk-blend-overlay 此类将混合模式设置为叠加。
.uk-blend-darken 此类将混合模式设置为变暗。
.uk-blend-lighten 此类将混合模式设置为变亮。
.uk-blend-color-dodge 此类将混合模式设置为颜色减淡。
.uk-blend-color-burn 此类将混合模式设置为颜色加深。
.uk-blend-hard-light 此类将混合模式设置为强光。
.uk-blend-soft-light 此类将混合模式设置为柔光。
.uk-blend-difference 此类将混合模式设置为差异。
.uk-blend-exclusion 此类将混合模式设置为排除。
.uk-blend-hue 此类将混合模式设置为色相。
.uk-blend-saturation 此类将混合模式设置为饱和度。
.uk-blend-color 此类将混合模式设置为颜色。
.uk-blend-luminosity 此类将混合模式设置为亮度。 
<div class="uk-position-relative">
    <div class="uk-blend-multiply uk-overlay uk-overlay-primary"></div>
    <img src="" width="" height="" alt="">
</div>
Blend Multiply

正片叠底

Blend Screen

滤色

Blend Overlay

覆盖层

Blend Darken

变暗

Blend Lighten

变亮

Blend Color Dodge

颜色减淡

Blend Color Burn

颜色加深

Blend Hard Light

强光

Blend Soft Light

柔光

Blend Difference

差异

Blend Exclusion

排除

Blend Hue

色相

Blend Saturation

饱和度

Blend Color

颜色

Blend 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" 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="images/dark.jpg" width="1800" height="1200" alt="Blend Luminosity">
            <div class="uk-position-center">
                <p class="uk-h4 uk-margin-remove">Luminosity</p>
            </div>
        </div>
    </div>
</div>

变换中心

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

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

变换原点

要修改动画的起始原点（如缩放），请添加 uk-transform-origin-* 类之一。这可以与 动画组件 结合使用。

类 描述
.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>

右下

顶部中心

底部中心

<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 类。

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

拖动

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

<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 类。