列表

轻松创建具有不同风格的漂亮列表.

用法

要应用这个组件,添加 .uk-list 类到一个无序或有序列表即可。这时列表将不显示任何间距及列表样式.

示例

  • List item 1
  • List item 2
  • List item 3

code

<ul class="uk-list">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

修饰

要为列表显示不同的样式,只需为 .uk-list 添加修饰类。列表组件的修饰类 不能 相互组合使用.

列表线

添加.uk-list-line 类线分割列表项.

示例

  • List item 1
  • List item 2
  • List item 3

code

<ul class="uk-list uk-list-line">...</ul>

列表条纹

添加.uk-list-striped 类列表条纹.

示例

  • List item 1
  • List item 2
  • List item 3

code

<ul class="uk-list uk-list-striped">...</ul>

列表间距

添加 .uk-list-space 类增加列之间的间距.

Example

  • 这个修饰类对于带有多行文本的列表项那是相当地有用
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco.

code

<ul class="uk-list uk-list-space">...</ul>