效果/Utility
最后更新于：2022-04-01 22:21:24
# 效果/Utility
一些实用的效果类集合，它们可以用来风格化你的网页内容。
## 容器
添加 `.uk-container` 类到一个块元素中，为其设置一个最大宽度并将网页的主要内容包装在其中。对于大屏幕采用不同的最大宽度。
* * *
### 居中
想要将容器居中，使用 `.uk-container-center` 类。对于其它的块元素，你需要设定一个宽度。
#### 示例
#### Code
```
```
### 单独的用来格式化上下文的块元素/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` | 居中对齐元素，并创建底部间距。 |
#### 示例
#### Code
```
```
```
```
注意 需要对齐的元素需要有一个宽度或最大宽度，它的宽度必须比父容器宽度小。
### 居中整个页面
如果你想将 `<html>` 和 `<body>` 元素扩展到整个页面的高度， `.uk-height-1-1` 类便派上了用场。创建错误页面时，这是非常有用的。
#### Code
```
...
```
* * *
### 水平居中
水平居中你的网页内容，添加 `.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
```
![]()
```
* * *
## 行内的 SVG
SVG 或可缩放的矢量图形真的很棒，比如作为LOGO使用时，无论是缩放还是用于动画，它都很清晰。要使用 CSS 来控制 SVG，只需要为图片标签添加 `data-uk-svg` 属性。这可以将 SVG 转变行内元素，并具有所有属性，包括 ID、class、width、height 等等，你可以通过 CSS 方便地控制它。
### Markup
```
```
* * *
## 外边距 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
```
![]()
![]()
```
* * *
## 标题变大
为了增大平板电脑和台式机下标题字体的大小，只需添加 `.uk-heading-large` 类。
### 示例
### Code
```
...
';
...
```
* * *
## 浮动与清除浮动
浮动是创建各式布局的基础。但浮动需要清除，否则在最坏的情况下需，你会得到一个杂乱无章的页面。下面的类能帮助你创建基础的布局。
| Class | 概述 |
| --- | --- |
| `.uk-float-left` | 浮动元素为左对齐。 |
| `.uk-float-right` | 浮动元素为右对齐。 |
| `.uk-clearfix` | 向父容器添加这个类来清除浮动。 |
### Code
```
...
...
...
...
...
...
```
* * *
## 外边距 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
```
``` 注意 默认情况下，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  ```
...
```
* * *
## 哑色链接
如果要去掉链接的默认颜色，只需添加 `.uk-link-muted` 类到锚元素或它的父元素。
### 示例
### Code
```
...
...
```
* * *
## 可滚动的预格式化文本
添加 `.uk-scrollable-text` 类设置一个最大高度，并提供一个垂直滚动条。这对预格式化的文本是非常有用的，它可以让你的代码块节省更多的空间。
### 示例
* * *
## 可滚动的盒子
添加 `.uk-scrollable-box` 类创建一个具有最大高度及垂直滚动条的看起来像面板的盒子。它可以包含任何类型的内容。
### 示例
#### Code
```
```
* * *
## 溢出容器/Overflow container
当容器内部的元素宽度超过了容器本身，只需要为容器的 `<div>` 元素添加一个 `.uk-overflow-container` 类，就能为容器带来一个水平方向的滚动条。 在响应式网页中处理表格时很有用，因为表格可能在某些断点会显得过于宽大。
### 示例
#### Code
```
...
```
* * *
## 显示效果
添加这些类中的一个改变元素的 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
```
...
```
* * *
### 响应式可见性
你可以在特定的视口宽度下对内容进行显示或隐藏。通过设置断点变量可以很容易的进行修改。由于不同设备的尺寸变得越来越模糊，所以类的名称保持通用性而不提及任何具体的设备名称。
| 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 |
...
```
* * *
## 可滚动的预格式化文本
添加 `.uk-scrollable-text` 类设置一个最大高度，并提供一个垂直滚动条。这对预格式化的文本是非常有用的，它可以让你的代码块节省更多的空间。
### 示例
* * *
## 可滚动的盒子
添加 `.uk-scrollable-box` 类创建一个具有最大高度及垂直滚动条的看起来像面板的盒子。它可以包含任何类型的内容。
### 示例
#### Code
```
```
* * *
## 溢出容器/Overflow container
当容器内部的元素宽度超过了容器本身，只需要为容器的 `<div>` 元素添加一个 `.uk-overflow-container` 类，就能为容器带来一个水平方向的滚动条。 在响应式网页中处理表格时很有用，因为表格可能在某些断点会显得过于宽大。
### 示例
#### Code
```
...
```
* * *
## 显示效果
添加这些类中的一个改变元素的 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
```
...
```
* * *
### 响应式可见性
你可以在特定的视口宽度下对内容进行显示或隐藏。通过设置断点变量可以很容易的进行修改。由于不同设备的尺寸变得越来越模糊，所以类的名称保持通用性而不提及任何具体的设备名称。
| 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 |
...
```
* * *
## 显示效果
添加这些类中的一个改变元素的 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
```
...