实用工具

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

容器

将 .uk-container 类添加到块元素，使其具有最大宽度并包裹网站的主要内容。对于大屏幕，它会应用不同的最大宽度。

居中

要使容器居中，请使用 .uk-container-center 类。对于任何其他块元素，您还需要应用宽度。

示例

居中的块元素

标记

<div class="uk-width-medium-1-2 uk-container-center">...</div>

清除和浮动

浮动是创建各种布局的基础。但是浮动需要清除，否则在最坏的情况下，您可能会得到一个混乱的站点。以下类将帮助您设置基本布局。

类	描述
`.uk-float-left`	使元素向左浮动。
`.uk-float-right`	使元素向右浮动。
`.uk-clearfix`	将此类添加到父容器以清除浮动。

标记

<div class="uk-clearfix">
    <div class="uk-float-right">...</div>
    <div class="uk-float-left">...</div>
</div>

新的块格式化上下文

除了使用 .uk-clearfix 类，您还可以创建一个新的块格式化上下文来清除浮动。根据您的设置，您可以评估哪种方法更适合。

类	描述
`.uk-nbfc`	将 overflow 设置为 hidden 以创建一个新的块格式化上下文。
`.uk-nbfc-alt`	将 display 设置为 table-cell 以创建一个新的块格式化上下文。

图像和对象的对齐

对齐图像或其他元素，并在文本和元素之间留出间距。

类	描述
`.uk-align-left`	使元素向左浮动，并创建右边距和下边距。
`.uk-align-right`	使元素向右浮动，并创建左边距和下边距。
`.uk-align-medium-left`	仅影响宽度为 768px 及以上的设备。
`.uk-align-medium-right`	仅影响宽度为 768px 及以上的设备。
`.uk-align-center`	使元素居中并创建下边距。

示例

图像右对齐 Lorem ipsum dolor sit amet, consectetur adipisicing 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 class="uk-clearfix">
    <img class="uk-align-medium-right" src="" alt="">
    ...
</p>

垂直对齐

要垂直对齐对象，您需要创建一个父容器，对象本身将对齐到该容器。

类	描述
`.uk-vertical-align`	将此类添加到父容器。此容器需要特定的高度。
`.uk-vertical-align-middle`	将此类添加到子元素以使内容居中。
`.uk-vertical-align-bottom`	将此类添加到子元素以使内容与底部对齐。
`.uk-height-1-1`	此辅助类应用 100% 的高度。

示例

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

标记

<div class="uk-vertical-align">
    <div class="uk-vertical-align-middle">
    ...
    </div>
</div>

<div class="uk-vertical-align">
    <div class="uk-vertical-align-bottom">
    ...
    </div>
</div>

注意您对齐的对象需要具有小于其父容器的宽度或最大宽度。

使整个页面居中

如果您想将 <html> 和 <body> 元素扩展到页面的完整高度，则 .uk-height-1-1 类非常方便。这在创建错误页面时非常有用。

标记

<html class="uk-height-1-1">
    ...
    <body class="uk-height-1-1">
        <div class="uk-vertical-align">
            <div class="uk-vertical-align-middle">...</div>
        </div>
    </body>
</html>

水平居中

要使内容也水平居中，请将 .uk-text-center 类添加到父元素，并将 .uk-container-center 类添加到子元素。这是因为响应式行为所必需的。

视口高度

要创建一个填充整个视口高度的容器，例如用于全屏图像或视频预告片，只需添加 .uk-height-viewport 类即可。

定位元素

UIkit 提供许多类来定位您的内容，而无需添加自己的 CSS。

类	描述
`.uk-position-top`	将元素绝对定位在顶部。
`.uk-position-top-left`	将元素绝对定位在左上角。
`.uk-position-top-right`	将元素绝对定位在右上角。
`.uk-position-bottom`	将元素绝对定位在底部。
`.uk-position-bottom-left`	将元素绝对定位在左下角。
`.uk-position-bottom-right`	将元素绝对定位在右下角。
`.uk-position-cover`	向元素添加绝对定位，并将其拉伸以覆盖整个父元素。
`.uk-position-relative`	向元素添加相对定位。
`.uk-position-z-index`	将元素的 z-index 设置为 1。

响应式对象

默认情况下，UIkit 中的图像会适应其父容器的宽度。如果要将响应式行为应用于媒体元素（如视频对象），只需添加以下类之一。

类	描述
`.uk-responsive-width`	根据其父元素的宽度调整对象的宽度，并保持原始的宽高比。
`.uk-responsive-height`	根据其父元素的高度调整对象的高度，并保持原始的宽高比。

注意 .uk-responsive-width 类也可以应用于 Iframe，前提是已设置其宽度和高度属性。

示例宽度

示例高度

标记

<video controls class="uk-responsive-width"></video>

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

内联 SVG

SVG 或可缩放矢量图形非常方便，例如显示在缩放或动画时保持清晰的徽标。要能够通过 CSS 控制 SVG，只需将 data-uk-svg 属性添加到图像标签。这会将您的图像转换为内联 SVG，包括所有属性，如 ID、类、宽度和高度，您现在可以使用 CSS 轻松定位这些属性。

标记

<img src="my-image.svg" data-uk-svg>

边距

添加以下类之一以向块元素添加间距。

类	描述
`.uk-margin`	添加与段落通常具有的相同的上边距和下边距。
`.uk-margin-top`	添加上边距。
`.uk-margin-bottom`	添加下边距。
`.uk-margin-left`	添加左边距。
`.uk-margin-right`	添加右边距。

更大的边距

添加以下类之一以向块元素添加更大的间距。

类	描述
`.uk-margin-large`	添加较大的上边距和下边距。
`.uk-margin-large-top`	添加较大的上边距。
`.uk-margin-large-bottom`	添加较大的下边距。
`.uk-margin-large-left`	添加较大的左边距。
`.uk-margin-large-right`	添加较大的右边距。

更小的边距

添加以下类之一以向块元素添加更小的间距。

类	描述
`.uk-margin-small`	添加较小的上边距和下边距。
`.uk-margin-small-top`	添加较小的上边距。
`.uk-margin-small-bottom`	添加较小的下边距。
`.uk-margin-small-left`	添加较小的左边距。
`.uk-margin-small-right`	添加较小的右边距。

删除边距

添加以下类之一以从块元素中删除边距。

类	描述
`.uk-margin-remove`	删除所有边距。
`.uk-margin-top-remove`	删除上边距。
`.uk-margin-bottom-remove`	删除下边距。

自动边距

要向堆叠元素（例如在较小视口上换行的内联元素）添加间距，只需将 data-uk-margin 属性添加到它们的父容器。它会自动将 .uk-margin-small-top 添加到较低的元素。

示例

标记

<p data-uk-margin>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</p>

注意默认情况下，数据属性会将 .uk-margin-small-top 类添加到堆叠元素。要应用更大的边距，只需添加 {cls:'uk-margin-top'} 选项。

内边距

要从块元素中删除内边距，请添加以下类之一。

类	描述
`.uk-padding-remove`	删除所有内边距。
`.uk-padding-top-remove`	删除上内边距。
`.uk-padding-bottom-remove`	删除下内边距。
`.uk-padding-vertical-remove`	删除上内边距和下内边距。

边框半径

要向元素（如图像）添加圆角，只需添加 .uk-border-rounded。要应用圆形，请添加 .uk-border-circle 类。

示例

Border rounded Border circle

<img class="uk-border-rounded" src="" alt="">
<img class="uk-border-circle" src="" alt="">

标题大号

要在平板电脑和台式机上增加标题的字体大小，只需添加 .uk-heading-large 类。

示例

标题

标记

<h1 class="uk-heading-large">...<h1>

链接静音

如果链接不应具有默认的链接颜色，只需将 .uk-link-muted 类添加到锚点元素或父元素。

示例

标题

标记

<a class="uk-link-muted">...<a>

<h1 class="uk-link-muted"><a>...<a><h1>

<ul class="uk-link-muted">
    <li><a>...<a></li>
    <li><a>...<a></li>
    <li><a>...<a></li>
</ul>

可滚动预格式化文本

添加 .uk-scrollable-text 类以设置最大高度并提供垂直滚动条。如果您不希望代码块占用太多空间，这对于预格式化文本非常有用。

示例

<!-- This is sample code to demonstrate preformatted text with a scrollbar. -->

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-left">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-right">...</div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-center">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-justify">...</div>
    </div>
</div>

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-break">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box"><p class="uk-margin-remove uk-text-truncate">...</p></div>
    </div>
</div>

可滚动框

添加 .uk-scrollable-box 类以创建一个具有最大高度并提供垂直滚动条的面板式框。它可以包含任何类型的内容。

示例

标记

<div class="uk-scrollable-box">
    <ul class="uk-list">
        <li><label><input type="checkbox">...</label></li>
        <li><label><input type="checkbox">...</label></li>
    </ul>
</div>

溢出容器

要创建一个容器，只要其中的元素比容器本身宽，该容器就会提供水平滚动条，只需将 .uk-overflow-container 类添加到 <div> 元素即可。当在响应式网站上处理表时，这非常有用，因为表在某些时候会变得太大。

示例

表头	表头	表头	表头	表头	表头	表头	表头
表尾	表尾	表尾	表尾	表尾	表尾	表尾	表尾
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据
表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据	表格数据

标记

<div class="uk-overflow-container">...</div>

显示实用工具

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

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

可见性实用工具

类	描述
`.uk-hidden`	隐藏任何设备上的元素。
`.uk-hidden-touch`	在触摸设备上隐藏元素。
`.uk-hidden-notouch`	在非触摸设备上隐藏元素。
`.uk-invisible`	隐藏元素，而不将其从流中删除。
`.uk-visible-hover`	使用 `display: block` 在悬停时显示隐藏的内容。将此类添加到父元素。
`.uk-visible-hover-inline`	使用 `display: inline-block` 在悬停时显示隐藏的内容。将此类添加到父元素。

示例

悬停我...

Bazinga!

标记

<div class="uk-visible-hover">
    <div class="uk-hidden">...</div>
</div>

响应式可见性

您可以在特定的视口宽度上显示或隐藏内容。断点通过变量设置，并且可以轻松修改。由于不同设备尺寸之间的界限不断模糊，因此类名保持通用，并且不引用特定设备。

类	小（手机）最多 767	中（平板电脑） 768 到 959	大（台式机） 960 及以上
`.uk-visible-small`	可见	隐藏	隐藏
`.uk-visible-medium`	隐藏	可见	隐藏
`.uk-visible-large`	隐藏	隐藏	可见
`.uk-hidden-small`	隐藏	可见	可见
`.uk-hidden-medium`	可见	隐藏	可见
`.uk-hidden-large`	可见	可见	隐藏