效果/Utility · UIkit 中文文檔

# 效果/Utility 一些實用的效果類集合，它們可以用來風格化你的網頁內容。 ## 容器添加 `.uk-container` 類到一個塊元素中，為其設置一個最大寬度并將網頁的主要內容包裝在其中。對于大屏幕采用不同的最大寬度。 * * * ### 居中想要將容器居中，使用 `.uk-container-center` 類。對于其它的塊元素，你需要設定一個寬度。 #### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f2b09825.jpg) #### 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` | 居中對齊元素，并創建底部間距。 | #### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f2b1ba6c.jpg) #### 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％的高度。 | ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f2b337e8.jpg) ### 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 寬度 ![](https://box.kancloud.cn/2016-05-12_57346f2b4d8af.jpg) ### Example 高度 ![](https://box.kancloud.cn/2016-05-12_57346f2b66c57.jpg) ### 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` 。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f2b7793a.jpg) ### 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 ![](https://box.kancloud.cn/2016-05-12_57346f2b8afbc.jpg) ``` <img class="uk-border-rounded" src="" alt=""> <img class="uk-border-circle" src="" alt=""> ``` * * * ## 標題變大為了增大平板電腦和臺式機下標題字體的大小，只需添加 `.uk-heading-large` 類。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f2ba1723.jpg) ### Code ``` <h1 class="uk-heading-large">...<h1> ``` * * * ## 啞色鏈接如果要去掉鏈接的默認顏色，只需添加 `.uk-link-muted` 類到錨元素或它的父元素。 ### 示例 ![](img/base-link-grey.jpg) ### 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` 類設置一個最大高度，并提供一個垂直滾動條。這對預格式化的文本是非常有用的，它可以讓你的代碼塊節省更多的空間。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f2bb4a04.jpg) * * * ## 可滾動的盒子添加 `.uk-scrollable-box` 類創建一個具有最大高度及垂直滾動條的看起來像面板的盒子。它可以包含任何類型的內容。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f2bccd43.jpg) #### 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` 類，就能為容器帶來一個水平方向的滾動條。在響應式網頁中處理表格時很有用，因為表格可能在某些斷點會顯得過于寬大。 ### 示例 ![](https://box.kancloud.cn/2016-05-12_57346f2bdeadb.jpg) #### 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 ![](https://box.kancloud.cn/2016-05-12_57346f2bf1305.jpg) #### 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 |