返回介绍
文江博客 开发文档 UIkit 中文文档 文章详情

效果

发布于 2019-05-26 16:28:18 字数 14964 浏览 1113 评论 0 收藏 0

一些实用的效果类集合，它们可以用来风格化你的网页内容。

容器

添加 .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％的高度。

示例

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。

ClassDescription
.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属性。

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 即可。

<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 类设置一个最大高度，并提供一个垂直滚动条。这对预格式化的文本是非常有用的，它可以让你的代码块节省更多的空间。

示例

<!-- 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 类，就能为容器带来一个水平方向的滚动条。 在响应式网页中处理表格时很有用，因为表格可能在某些断点会显得过于宽大。

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 来显示隐藏的内容。将这个类添加到父元素中。

Markup

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

响应式可见性

你可以在特定的视口宽度下对内容进行显示或隐藏。通过设置断点变量可以很容易的进行修改。由于不同设备的尺寸变得越来越模糊，所以类的名称保持通用性而不提及任何具体的设备名称。

ClassSmall
(手机)
最大 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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文