描述列表

轻松创建外观精美的描述列表,它们具有不同的样式。

用法

不需要组件类来创建描述列表,但 UIkit 提供了一些修饰符类来以不同的样式显示列表。 描述列表组件的修饰符彼此不能组合使用。

水平描述列表

添加 .uk-description-list-horizontal 类以并排显示术语和描述。

示例

描述列表
描述列表定义了术语及其相应的描述。
Lorem ipsum
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
一个长术语被截断
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

标记

<dl class="uk-description-list-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>

响应式行为

在较窄的视口(如手机)中,样式将变回默认的堆叠描述列表。


带线的描述列表

添加 .uk-description-list-line 类以用线条分隔描述列表项。

示例

描述列表
描述列表定义了术语及其相应的描述。
Lorem ipsum
Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim
Ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

标记

<dl class="uk-description-list-line">...</dl>