跳到主要内容

文档

Utility

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

Panel

UIkit 使用面板（panel）来勾勒内容中的某些区块。例如，可以把它们按 Grid 组件 的栅格列来排列。

为 <div> 元素添加 .uk-panel 类，可以创建一个定位上下文、把 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 类。
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>

溢出

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

类 说明
.uk-overflow-hidden 添加该类可裁剪超出其容器尺寸的内容。
.uk-overflow-auto 添加该类可创建一个容器，当元素内容比容器本身更宽或更高时，它会提供水平或垂直滚动条。

注意 在响应式网站上处理表格时，.uk-overflow-auto 类很有用，因为表格在某个宽度下就会变得过大。它在 <pre> 元素上同样效果很好。

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
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
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer 
<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 属性可以扩展元素的高度，让它填满父容器剩余的高度。如果其内容高于扩展后的高度，它会提供一个垂直滚动条。

Some content before the overflow auto container.

Some content after the overflow auto container.

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

它经常被用在 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 选项来改变目标高度。了解更多

选项 值 默认值 说明
sel-container String .uk-modal 提供高度的容器元素的 CSS 选择器。
sel-content String .uk-modal-dialog 包裹内部内容、用于提供高度的元素的 CSS 选择器。

溢出淡出

添加 uk-overflow-fade 属性可以创建一个容器，当元素内容比容器本身更宽或更高时，它会提供水平或垂直滚动。它的行为与 uk-overflow-auto 类类似，但不是显示滚动条，而是让子元素淡出，提示还有更多内容可以滚动查看。这种界面模式特别适合不应换行到下一行的导航。

<div uk-overflow-fade>
    …
</div>

它经常被用在 Modal 组件 中。

<div uk-overflow-fade>
    <ul class="uk-subnav uk-flex-nowrap" uk-dropnav="mode: click; container: body">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href>Parent <span uk-drop-parent-icon></span></a>
            <div class="uk-dropdown">
                <ul class="uk-nav uk-dropdown-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-header">Header</li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

它在垂直方向上同样有效。

<div class="uk-height-medium uk-width-small uk-margin" uk-overflow-fade>
    <ul class="uk-tab-left uk-flex-nowrap" uk-tab>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

调整大小

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

类 说明
.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>

显示方式

添加下面这些类中的某一个，可改变元素的 display 属性。

类 说明
.uk-display-block 强制元素表现为块级元素。
.uk-display-inline 强制元素表现为行内元素。
.uk-display-inline-block 强制元素表现为行内块级元素。

Inline

这些类常用于为以图片为子元素的容器创建定位上下文。容器会保持与图片相同的尺寸，同样具有响应式行为。这样一来，借助 Position 组件 放在图片上方的内容就不会溢出图片的尺寸范围。

类 说明
.uk-inline 添加该类可让元素表现为行内块级元素，为其添加 100% 的最大宽度，并创建定位上下文。
.uk-inline-clip 与 .uk-inline 相同，此外还会裁剪溢出的子元素。 
<div class="uk-inline">
    <img src="" width="" height="" alt="">
    <div class="uk-position-cover"></div>
</div>
Overlay
<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 Maps，可能需要用它来修正地图中的图片。 
<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>
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 类。该类也可以与其他 .uk-box-shadow-* 修饰符组合使用。

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

悬停

要在悬停时应用盒阴影，请添加下面这些类中的某一个。它们也可以用来修改悬停时的阴影尺寸，只需把它们与上面提到的某个类组合使用即可。

类 说明
.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 类，把它直接添加到 <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 类可以轻松定义你的 Logo，例如在导航栏（navbar）中使用。

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

在深色背景上显示图片时，添加 Inverse 组件 中的 .uk-light 类，这样它的颜色会自动反转，以获得更好的可见性。

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

Logo 图片

你也可以使用 <img> 元素作为 Logo，例如一个 SVG。

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

你甚至可以通过 Inverse 组件 为浅色和深色背景自动显示不同的 Logo。只需为第二张 Logo 图片添加 .uk-logo-inverse 类。根据颜色模式的不同，当父元素应用了 .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 的方式插入 SVG Logo，请使用 SVG 组件。

混合模式

添加下面这些类中的某一个，可以为背景应用不同的混合模式，例如把背景放在图片上时。它们可以与 Overlay 组件 组合使用。想更好地理解背景混合模式的工作原理，可以参考这篇 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

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="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-* 类中的某一个。它可以与 Animation 组件 组合使用。

类 说明
.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 类。

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