# 效果/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` | 居中對齊元素,并創建底部間距。 |
#### 示例

#### 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%的高度。 |
### 示例

### 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` 類。
### 示例

### Code
```
<h1 class="uk-heading-large">...<h1>
```
* * *
## 啞色鏈接
如果要去掉鏈接的默認顏色,只需添加 `.uk-link-muted` 類到錨元素或它的父元素。
### 示例

### 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` 類設置一個最大高度,并提供一個垂直滾動條。這對預格式化的文本是非常有用的,它可以讓你的代碼塊節省更多的空間。
### 示例

* * *
## 可滾動的盒子
添加 `.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` 類,就能為容器帶來一個水平方向的滾動條。 在響應式網頁中處理表格時很有用,因為表格可能在某些斷點會顯得過于寬大。
### 示例

#### 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 |
- UIkit 中文文檔
- 開始使用
- 初學者
- 開始使用
- 如何自定義
- 布局示例
- 開發者
- 項目結構
- Less & Sass 文件
- 創建主題
- 創建樣式
- Customizer.json
- JavaScript
- 自定義前綴
- 核心組件
- 默認
- 基礎
- 打印
- 布局類組件
- 網格
- 面板/Panel
- 塊/Block
- 文章
- 評論/Comment
- 效果/Utility
- Flex 布局
- 覆蓋/Cover
- 導航類組件
- 導航菜單
- 導航欄
- 二級導航
- 面包屑/Breadcrumb
- 分頁
- 選項卡
- 縮略圖導航/Thumbnav
- 頁面元素
- 列表
- 描述列表
- 表格
- 表單
- 常用組件
- 按鈕
- 圖標
- 關閉/Close
- 徽章/Badge
- 提示框
- 縮略圖/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 動畫
- 對比度/Contrast
- JAVASCRIPT組件
- 下拉菜單
- 模態對話框
- 抽屜/Off-canvas
- 切換器/Switcher
- 撥動/toggle
- 滾動監聽/Scrollspy
- 平滑滾動
- 附加組件
- 布局類組件
- 動態網格
- 視差網格
- 導航類組件
- 圓點導航
- 滑動導航/Slidenav
- 動態分頁
- 常用組件
- 高級表單
- 文件表單/Form file
- 密碼表單
- 選擇表單
- 占位符
- 進度條/Progress
- JAVASCRIPT組件
- 燈箱/Lightbox
- 自動完成/Autocomplete
- 日期選擇器/Datepicker
- HTML 編輯器
- 滾動條/Slider
- 滑塊集/Slideset
- 幻燈片/Slideshow
- 視差/Parallax
- 手風琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附著/Sticky
- 時間選擇器
- 工具提示/Tooltip
- 上傳