实用程序
一系列用于设置内容样式的实用程序类。
面板
UIkit 使用面板来勾勒内容的某些部分。例如，这些面板可以排列在 网格组件 的网格列中。
将 .uk-panel 类添加到 <div> 元素以创建位置上下文，将盒模型设置为边框盒，应用清除浮动和移除其最后一个子元素的底部边距。
- 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>- 打开
标题
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 选项添加到属性来更改目标高度。 了解更多
| 选项 | 值 | 默认值 | 描述 |
|---|---|---|---|
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> <!-- 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> </code> </pre> </div> <div> <pre class="uk-resize"> <code> <!-- 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> </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 |
像包含一样，但永远不会向上缩放。 |
注意 由于图像和视频在 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-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 |
与右下角对齐。 |
边框半径
要修改元素（如图像）的边框半径，请添加以下类之一。
| 类 | 描述 |
|---|---|
.uk-border-rounded |
将此类添加到应用圆角。 |
.uk-border-circle |
将此类添加到应用圆形形状。 |
.uk-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> 元素中来实现文本中的首字母下沉。
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.
<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类，您可以轻松地定义您的logo，例如在您的导航栏中。
<a class="uk-logo" href=""></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>元素，例如SVG，作为logo。
<a class="uk-logo" href="">
<img src="" width="" height="" alt="">
</a>您甚至可以通过使用Inverse 组件自动显示浅色和深色背景的替代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 组件.
混合模式
添加以下类之一，将不同的混合模式应用于您的背景，例如当将它们放置在图像上时。您可以将它们与Overlay 组件结合使用。为了更好地理解背景混合模式的工作原理，请查看这篇CSS Tricks 文章.
| 类 | 描述 |
|---|---|
.uk-blend-multiply |
此类将混合模式设置为multiply。 |
.uk-blend-screen |
此类将混合模式设置为screen。 |
.uk-blend-overlay |
此类将混合模式设置为overlay。 |
.uk-blend-darken |
此类将混合模式设置为darken。 |
.uk-blend-lighten |
此类将混合模式设置为lighten。 |
.uk-blend-color-dodge |
此类将混合模式设置为color dodge。 |
.uk-blend-color-burn |
此类将混合模式设置为color 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="" width="" height="" alt="">
</div>-
Multiply
Screen
覆盖层
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="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>右下角
顶部居中
底部居中
<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类。
拖动
要将移动光标应用于正在拖动的元素，请添加.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类。