列表

无序列表

无序列表为不用按一顺序的列表内容，框架用.list定义默认的列表样式：

    <ul class="list">
      <li>无序列表</li>
      <li>
        无序列表
        <ul>
          <li>无序列表</li>
          <li>无序列表</li>
          <li>无序列表</li>
        </ul>
      </li>
      <li>无序列表</li>
    </ul>
  

无样式列表

添加.list-unstyle样式，可以去除列表样式效果。

    <ul class="list list-unstyle">
      <li>无序列表</li>
      <li>
        无序列表
        <ul>
          <li>无序列表</li>
          <li>无序列表</li>
          <li>无序列表</li>
        </ul>
      </li>
      <li>无序列表</li>
    </ul>
  

内联列表

添加.list-inline样式，列表同一行内显示。

    <ul class="list list-inline">
      <li>内联列表</li>
      <li>内联列表</li>
      <li>内联列表</li>
    </ul>
  

有序列表

有序列表为按顺序排列的内容， 同样用.list定义默认的列表样式：

    <ol class="list">
      <li>有序列表</li>
      <li>
        有序列表
        <ul>
          <li>有序列表</li>
          <li>有序列表</li>
          <li>有序列表</li>
        </ul>
      </li>
      <li>有序列表</li>
    </ol>
  

中文列表

采用中文有序列表，添加.list-cn样式。

    <ol class="list list-cn">
      <li>中文列表</li>
      <li>
        中文列表
        <ul>
          <li>中文列表</li>
          <li>中文列表</li>
          <li>中文列表</li>
        </ul>
      </li>
      <li>中文列表</li>
    </ol>
  

字母列表

采用字母有序列表，添加.list-en样式。

    <ol class="list list-en">
      <li>字母列表</li>
      <li>
        字母列表
        <ul>
          <li>字母列表</li>
          <li>字母列表</li>
          <li>字母列表</li>
        </ul>
      </li>
      <li>字母列表</li>
    </ol>
  

描述列表

带有描述内容的列表：

    <dl>
      <dt>描述标题</dt>
      <dd>描述列表内容</dd>
      <dt>描述标题</dt>
      <dd>描述列表内容</dd>
      <dt>描述标题</dt>
      <dd>描述列表内容</dd>
    </dl>
  

内联列表

添加.dl-inline样式，列表同一行内显示。

    <dl class="dl-inline clearfix">
      <dt>描述标题</dt>
      <dd>描述列表内容</dd>
      <dt>描述标题</dt>
      <dd>描述列表内容</dd>
      <dt>描述标题</dt>
      <dd>描述列表内容</dd>
    </dl>
  

标题长度

默认标题为2字符，也可以使用em1-12增加标题字符数，同时需要设置内容的左边距ml1-12。

    <dl class="dl-inline clearfix">
      <dt class="em4">描述标题</dt>
      <dd class="ml4">描述列表内容</dd>
      <dt class="em4">描述标题</dt>
      <dd class="ml4">描述列表内容</dd>
      <dt class="em4">描述标题</dt>
      <dd class="ml4">描述列表内容</dd>
    </dl>
  

列表组

列表组为在列表的样式的基础上，将内容组合显示：

    <ul class="list-group">
      <li>列表组</li>
      <li>列表组</li>
      <li>列表组</li>
    </ul>
  

图标列表

列表组为在列表的样式的基础上，将内容组合显示：

    <ul class="list-group list-icon">
      <li><span class="list-media"><em class="icon-icon h3"><i></i></em></span>列表组<span class="list-addon">说明文字 &rang;</span></li>
      <li><span class="list-media"><em class="icon-icon h3"><i></i></em></span>列表组</li>
      <li><span class="list-media"><em class="icon-icon h3"><i></i></em></span>列表组</li>
    </ul>
  

5条分组

常用于文章信息的列表显示，同时也可以组合成复杂的定制化内容。

    <ul class="list-group list-five">
      <li>列表组</li>
      <li>列表组</li>
      <li>列表组</li>
      ......
    </ul>
  

条纹列表组

添加.list-striped样式，列表组条纹状显示。

    <ul class="list-group list-striped">
      <li>列表组</li>
      <li>列表组</li>
      <li>列表组</li>
      ......
    </ul>
  

外边框

添加.list-box列表组添加外边框

    <ul class="list-group list-box">
      <li>列表组</li>
      <li>列表组</li>
      <li>列表组</li>
    </ul>
  

链接组

使用链接组成的列表内容，用.list-link定义

    <div class="list-link list-box">
      <a href="javascript:;">链接列表</a>
      <a href="javascript:;">链接列表</a>
      <a href="javascript:;" class="active">链接列表</a>
      <a href="javascript:;">链接列表</a>
      <a href="javascript:;">链接列表</a>
    </div>