UIkit3.x文档

文本

用于设置文本样式的实用class集。

将此组件与Heading 组件结合使用以设置内容的样式。

样式修饰

UIkit提供了各种实用的文本效果来设置文本样式。

Class Description
.uk-text-lead 突出显示文本,比如文章子标题
.uk-text-meta 添加到包含相关文章或类似内容的元数据中。

字体大小

调整文本的字体大小

Class Description
.uk-text-small 减小字体
.uk-text-large 增大字体

字体粗细

调整文本的字体粗细。

Class Description
.uk-text-light 字体粗细为300.
.uk-text-normal 字体粗细为400.
.uk-text-bold 字体粗细为700.
.uk-text-lighter 较淡的字体粗细
.uk-text-bolder 较粗的字体

字体样式

添加.uk-text-italic class 创建斜体文本.


大小写转换

The following classes will transform text into uppercased, capitalized or lowercased characters.

Class Description
.uk-text-capitalize 转换为首字母大写
.uk-text-uppercase 转换为字母大写
.uk-text-lowercase 转换为字母小写

文本颜色

对文本元素应用不同的颜色。

Class Description
.uk-text-muted 淡化的文本颜色
.uk-text-emphasis 强调的文本信息
.uk-text-primary 强调额外的文本信息
.uk-text-secondary 添加此类以强调带有辅助颜色的文本。
.uk-text-success 通常表示成功一类积极的信息
.uk-text-warning 表示警告信息
.uk-text-danger 表示危险信息

文字背景

要将渐变或背景图像应用于文本,请将.uk-text-background class添加到文本元素中的<span>元素。如果不定义background-image的样式,那么将应用颜色primary。

<h1><span class="uk-text-background"></span></h1>

文本对齐

调整文本对齐方式。

Class Description
.uk-text-left 左对齐
.uk-text-right 右对齐
.uk-text-center 文字水平居中
.uk-text-justify 文字两端对齐
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-left
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center
  • <div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-left uk-card-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-left</code>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-right uk-card-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-right</code>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-center uk-card-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center</code>
                </div>
            </div>
        </div>
    </div>

响应式

UIki提供了许多响应的对齐类。它们的使用方式与其他大多数的对齐class基本一致,不同之处在于它们的后缀表示它们从中生效的断点。

Class Description
.uk-text-left@s
.uk-text-center@s
.uk-text-right@s
只在640px及以上的宽度生效。
.uk-text-left@m
.uk-text-center@m
.uk-text-right@m
只在960px 及以上的宽度生效。
.uk-text-left@l
.uk-text-center@l
.uk-text-right@l
只在1200px 及以上的宽度生效。
.uk-text-left@xl
.uk-text-center@xl
.uk-text-right@xl
只在1600px及以上的宽度生效。
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center@s
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right@l
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center@m
  • <div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-center@s uk-card-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center@s</code>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-right@l uk-card-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-right@l</code>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-small">
                <div class="uk-text-center@m uk-card-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center@m</code>
                </div>
            </div>
        </div>
    </div>

垂直对齐

使文本与对象垂直对齐。

Class Description
.uk-text-top 顶部对齐
.uk-text-middle 垂直居中对齐
.uk-text-bottom 底部对齐
.uk-text-baseline 基线对齐
  • Lorem ipsum.
    Lorem ipsum.
    Lorem ipsum.
  • <div class="uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
        <div>
            <img src="/skin/ukv3/images/avatar.jpg" width="50" height="50">
            <span class="uk-text-top">Lorem ipsum.</span>
        </div>
        <div>
            <img src="/skin/ukv3/images/avatar.jpg" width="50" height="50">
            <span class="uk-text-middle">Lorem ipsum.</span>
        </div>
        <div>
            <img src="/skin/ukv3/images/avatar.jpg" width="50" height="50">
            <span class="uk-text-bottom">Lorem ipsum.</span>
        </div>
    </div>

文本换行

关于文本换行的一些有用的class。

Class Description
.uk-text-truncate 截断文本,防止文本多行显示
.uk-text-break 如果文本长度将超过容器宽度时,强制换行。
.uk-text-nowrap 防止文本被截断成多行显示。
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
  • <div class="uk-child-width-1-2@s" uk-grid>
        <div>
            <div class="uk-panel uk-panel-box uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        </div>
        <div>
            <div class="uk-panel uk-panel-box uk-text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</div>
        </div>
    </div>