列表

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

无序列表

示例

  • 条目 1
  • 条目 2
    • 条目 1
    • 条目 2
      • 条目 1
      • 条目 2
  • 条目 3
  • 条目 4

代码

<ul>
    <li>条目 1</li>
    <li>条目 2
        <ul>
            <li>条目 1</li>
            <li>条目 2
                <ul>
                    <li>条目 1</li>
                    <li>条目 2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>条目 3</li>
    ...
</ul>

有序列表

示例

  1. 条目 1
  2. 条目 2
    1. 条目 1
    2. 条目 2
      1. 条目 1
      2. 条目 2
  3. 条目 3
  4. 条目 4

代码

<ol>
    <li>条目 1</li>
    <li>条目 2
        <ol>
            <li>条目 1</li>
            <li>条目 2
                <ol>
                    <li>条目 1</li>
                    <li>条目 2</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>条目 3</li>
    ...
</ol>

无样式列表

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

示例

  1. 条目 1
  2. 条目 2
  3. 条目 3
  4. 条目 4

代码

<ol class="list-unstyled">
    <li>条目 1</li>
    ...
</ol>

行内列表

Inline 列表, with a class list-inline

示例

  1. 条目 1
  2. 条目 2
  3. 条目 3
  4. 条目 4

代码

<ol class="list-inline">
    <li>条目 1</li>
    ...
</ol>

列表线

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

示例

  • 条目 1
  • 条目 2
  • 条目 3
  • 条目 4

代码

<ul class="list-unstyled list-line">
    <li>条目 1</li>
    ...
</ul>

列表条纹

添加 list-striped 类为列表条纹。

示例

  • 条目 1
  • 条目 2
  • 条目 3
  • 条目 4

代码

<ul class="list-unstyled list-striped">
    <li>条目 1</li>
    ...
</ul>

列表间距

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

示例

  • 条目 1
  • 条目 2
  • 条目 3
  • 条目 4

代码

<ul class="list-unstyled list-space">
    <li>条目 1</li>
    ...
</ul>

描述列表

轻松创建具有不同风格的漂亮的描述列表。

示例

描述列表
描述列表用于定义术语和相应的描述。
描述列表用于定义术语和相应的描述。
描述列表
描述列表用于定义术语和相应的描述。
描述列表
描述列表用于定义术语和相应的描述。

代码

<dl>
    <dt>...</dt>
    <dd>...</dd>
    <dd>...</dd>
    <dt>...</dt>
    <dd>...</dd>
    ...
</dl>

描述列表线

添加 dl-line 类用线条分隔描述列表项之间的间距。

示例

描述列表
描述列表用于定义术语和相应的描述。
描述列表用于定义术语和相应的描述。
描述列表
描述列表用于定义术语和相应的描述。
描述列表
描述列表用于定义术语和相应的描述。

代码

<dl class="dl-line">
    <dt>...</dt>
    <dd>...</dd>
    <dd>...</dd>
    <dt>...</dt>
    <dd>...</dd>
    ...
</dl>

描述列表间距

添加 dl-space 类增加列之间的间距。

示例

描述列表
描述列表用于定义术语和相应的描述。
描述列表用于定义术语和相应的描述。
描述列表
描述列表用于定义术语和相应的描述。
描述列表
描述列表用于定义术语和相应的描述。

代码

<dl class="dl-space">
    <dt>...</dt>
    <dd>...</dd>
    <dd>...</dd>
    <dt>...</dt>
    <dd>...</dd>
    ...
</dl>

水平描述列表

添加 dl-horizontal 类使术语与描述并排显示。

示例

描述列表
描述列表用于定义术语和相应的描述。描述列表用于定义术语和相应的描述。描述列表用于定义术语和相应的描述。描述列表用于定义术语和相应的描述。描述列表用于定义术语和相应的描述。描述列表用于定义术语和相应的描述。描述列表用于定义术语和相应的描述。描述列表用于定义术语和相应的描述。描述列表用于定义术语和相应的描述。
描述列表
描述列表用于定义术语和相应的描述。
被截断的一个比较长的术语
描述列表用于定义术语和相应的描述。

代码

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

备注 较窄的窗口中,比如手机,描述列表将变回默认的堆叠样式。