描述列表
轻松创建具有不同风格的漂亮的描述列表。
用法
创建描述列表并不需要像其他组件一样必须用到某个类,但是 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.
Code
<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.
Code
<dl class="uk-description-list-line">...</dl>