效果/Utility
一些实用的效果类集合，它们可以用来风格化你的网页内容。
容器
添加 .uk-container 类到一个块元素中，为其设置一个最大宽度并将网页的主要内容包装在其中。对于大屏幕采用不同的最大宽度。
居中
想要将容器居中，使用 .uk-container-center 类。对于其它的块元素，你需要设定一个宽度。
示例
Code
<div class="uk-width-medium-1-2 uk-container-center">...</div>浮动与清除浮动
浮动是创建各式布局的基础。但浮动需要清除，否则在最坏的情况下需，你会得到一个杂乱无章的页面。下面的类能帮助你创建基础的布局。
| Class | 概述 |
|---|---|
.uk-float-left |
浮动元素为左对齐。 |
.uk-float-right |
浮动元素为右对齐。 |
.uk-clearfix |
向父容器添加这个类来清除浮动。 |
Code
<div class="uk-clearfix">
<div class="uk-float-right">...</div>
<div class="uk-float-left">...</div>
</div>单独的用来格式化上下文的块元素/New block formatting context
代替使用 .uk-clearfix 类，你可以单独创建一个块元素来清除上下文的浮动。基于你的设置，你可以对其进行评估哪种方式更加适合。
| Class | 概述 |
|---|---|
.uk-nbfc |
设置 overflow 为 hidden 来创建一个单独的用来格式化上下文的块元素。 |
.uk-nbfc-alt |
设置 display 为 table-cell 来创建一个单独的用来格式化上下文的块元素。 |
图片与对象的对齐
有间距地将图片与其他元素（比如文本）对齐。
| Class | 概述 |
|---|---|
.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.
Code
<p class="uk-clearfix">
<img class="uk-align-medium-right" src="" alt="">
...
</p>垂直对齐
将对象垂直对齐，你必须为需要对齐的对象创建一个父容器。
| Class | 概述 |
|---|---|
.uk-vertical-align |
向父容器添加这个类。这个容器需要被设定一个高度。 |
.uk-vertical-align-middle |
向子元素添加这个类，使内容居中对齐。 |
.uk-vertical-align-bottom |
向子元素添加这个类，使内容与底部对齐。 |
.uk-height-1-1 |
这个辅助类用来赋予100％的高度。 |
示例
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Code
<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 类便派上了用场。创建错误页面时，这是非常有用的。
Code
<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。
| Class | Description |
|---|---|
.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 |
为元素添加relative定位方法 |
.uk-position-z-index |
为元素添加数值为1的 z-index 属性 |
响应式对象
在UIkit中，图片会默认地自适应它的父容器。如果你想将响应式特性应用于媒体元素，比如视频对象，只需要添加下面的类中的一个。
| Class | 描述 |
|---|---|
.uk-responsive-width |
根据父容器的宽度调整对象的宽度，保持对象原始的宽高比。 |
.uk-responsive-height |
根据父容器的高度调整对象的高度，保持对象原始的宽高比。 |
NOTE 同样，可以添加 .uk-responsive-width 类名到 iframe ，此iframe需要有预设的width和height属性。
Example 宽度
Example 高度
Markup
<video controls class="uk-responsive-width"></video>
<img class="uk-responsive-height" src="" alt="">行内的 SVG
SVG 或可缩放的矢量图形真的很棒，比如作为LOGO使用时，无论是缩放还是用于动画，它都很清晰。要使用 CSS 来控制 SVG，只需要为图片标签添加 data-uk-svg 属性。这可以将 SVG 转变行内元素，并具有所有属性，包括 ID、class、width、height 等等，你可以通过 CSS 方便地控制它。
Markup
<img src="my-image.svg" data-uk-svg>外边距 Margin
添加一个下面的类为块元素添加外边距。
| Class | 描述 |
|---|---|
.uk-margin |
为一个段落添加相同的顶部和底部外边距。 |
.uk-margin-top |
添加顶部外边距。 |
.uk-margin-bottom |
添加底部外边距。 |
.uk-margin-left |
添加左侧外边距。 |
.uk-margin-right |
添加右侧外边距。 |
较大的外边距
使用一个下面的类来为块元素添加较大的外边距。
| Class | 描述Description |
|---|---|
.uk-margin-large |
为一个段落添加较大的顶部和底部外边距。 |
.uk-margin-large-top |
添加较大的顶部外边距。 |
.uk-margin-large-bottom |
添加较大的底部外边距。 |
.uk-margin-large-left |
添加较大的左侧外边距。 |
.uk-margin-large-right |
添加较大的右侧外边距。 |
较小的外边距
使用一个下面的类来为块元素添加较小的外边距。
| Class | 描述 |
|---|---|
.uk-margin-small |
为一个段落添加较小的顶部和底部外边距。 |
.uk-margin-small-top |
添加较小的顶部外边距。 |
.uk-margin-small-bottom |
添加较小的底部外边距。 |
.uk-margin-small-left |
添加较小的左侧外边距。 |
.uk-margin-small-right |
添加较小的右侧外边距。 |
移除外边距
添加一个下面的类来移除块元素的外边距。
| Class | 描述 |
|---|---|
.uk-margin-remove |
移除全部外边距。 |
.uk-margin-top-remove |
移除顶部外边距。 |
.uk-margin-bottom-remove |
移除底部外边距。 |
自动外边距Auto margin
为堆叠的多个元素间距，例如，在较小的视口中堆叠显示多个并列的内联元素时，只需要添加 data-uk-margin 属性到它们的父元素，即可自动为子元素添加 the .uk-margin-small-top 。
示例
Code
<p data-uk-margin>
<button class="uk-button">...</button>
<button class="uk-button">...</button>
</p>注意 默认情况下，data属性为堆叠的元素添加 .uk-margin-small-top 类。如果需要添加更大的margin，只需要添加 {cls:'.uk-margin-top'} 选项就行。
Padding
移除块元素内的 padding ，添加以下类中的一个就行了。
| Class | 描述 |
|---|---|
.uk-padding-remove |
移除所有padding. |
.uk-padding-top-remove |
移除顶部padding. |
.uk-padding-bottom-remove |
移除底部padding |
.uk-padding-vertical-remove |
移除顶部和底部padding. |
Border 半径
要为元素添加圆角，添加 .uk-border-rounded即可。要使用圆形，添加 .uk-border-circle 即可。
Example
<img class="uk-border-rounded" src="" alt="">
<img class="uk-border-circle" src="" alt="">
标题变大
为了增大平板电脑和台式机下标题字体的大小，只需添加 .uk-heading-large 类。
示例
Heading
Code
<h1 class="uk-heading-large">...<h1>哑色链接
如果要去掉链接的默认颜色，只需添加 .uk-link-muted 类到锚元素或它的父元素。
示例
Heading
Code
<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 类创建一个具有最大高度及垂直滚动条的看起来像面板的盒子。它可以包含任何类型的内容。
示例
Code
<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>溢出容器/Overflow container
当容器内部的元素宽度超过了容器本身，只需要为容器的 <div> 元素添加一个 .uk-overflow-container 类，就能为容器带来一个水平方向的滚动条。 在响应式网页中处理表格时很有用，因为表格可能在某些断点会显得过于宽大。
示例
| Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading | Table Heading |
|---|---|---|---|---|---|---|---|
| Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer | Table Footer |
| Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
| Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data | Table Data |
Code
<div class="uk-overflow-container">...</div>显示效果
添加这些类中的一个改变元素的 display 属性。
| Class | 描述 |
|---|---|
.uk-display-block |
强制将元素改变成块元素。 |
.uk-display-inline |
强制将元素改变成内联元素。 |
.uk-display-inline-block |
强制将元素改变成内联块元素。 |
可见性效果
| Class | 描述 |
|---|---|
.uk-hidden |
在所有设备上隐藏该元素。 |
.uk-hidden-touch |
在触控设备上隐藏 |
.uk-hidden-notouch |
在非触控设备上隐藏 |
.uk-invisible |
隐藏该元素，但是不在流量上删除该元素。 |
.uk-visible-hover |
悬停时通过 display: block来显示隐藏的内容。将这个类添加到父元素中。 |
.uk-visible-hover-inline |
悬停时通过 display: inline-block 来显示隐藏的内容。将这个类添加到父元素中。 |
Example
Markup
<div class="uk-visible-hover">
<div class="uk-hidden">...</div>
</div>响应式可见性
你可以在特定的视口宽度下对内容进行显示或隐藏。通过设置断点变量可以很容易的进行修改。由于不同设备的尺寸变得越来越模糊，所以类的名称保持通用性而不提及任何具体的设备名称。
| Class | Small (手机) 最大 767 |
Medium (平板) 768 到 959 |
Large (PC) 960 以上 |
|---|---|---|---|
.uk-visible-small |
可见Visible | 隐藏Hidden | 隐藏Hidden |
.uk-visible-medium |
隐藏Hidden | 可见Visible | 隐藏Hidden |
.uk-visible-large |
隐藏Hidden | 隐藏Hidden | 可见Visible |
.uk-hidden-small |
隐藏Hidden | 可见Visible | 可见Visible |
.uk-hidden-medium |
可见Visible | 隐藏Hidden | 可见Visible |
.uk-hidden-large |
可见Visible | 可见Visible | 隐藏Hidden |
