UIkit3.x文档

定义列表

轻松创建外观精美的定义列表,这些列表具有不同的样式。

用法

添加 .uk-description-listclass来堆叠显示术语和描述。

<dl class="uk-description-list">
    <dt></dt>
    <dd></dd>
</dl>
  • Description term
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Description term
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Description term
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <dl class="uk-description-list">
        <dt>Description term</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
        <dt>Description term</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
        <dt>Description term</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    </dl>

分割线

添加 .uk-description-list-divider 类可在列表项之间添加一条水平线。

<dl class="uk-description-list uk-description-list-divider">
    <dt></dt>
    <dd></dd>
</dl>
  • Description term
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Description term
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Description term
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <dl class="uk-description-list uk-description-list-divider">
        <dt>Description term</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
        <dt>Description term</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
        <dt>Description term</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
    </dl>