安信娱乐谁是老板

拼图开发文档

列表

列表包含无序列表、有序列表、内联列表、描述列表等,同时框架也定义了列表组样式。

无序列表

无序列表为不用按一顺序的列表内容,框架用.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定义默认的列表样式:

  1. 有序列表
  2. 有序列表
    • 有序列表
    • 有序列表
    • 有序列表
  3. 有序列表
    <ol class="list">
      <li>有序列表</li>
      <li>
        有序列表
        <ul>
          <li>有序列表</li>
          <li>有序列表</li>
          <li>有序列表</li>
        </ul>
      </li>
      <li>有序列表</li>
    </ol>
  

中文列表

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

  1. 中文列表
  2. 中文列表
    • 中文列表
    • 中文列表
    • 中文列表
  3. 中文列表
    <ol class="list list-cn">
      <li>中文列表</li>
      <li>
        中文列表
        <ul>
          <li>中文列表</li>
          <li>中文列表</li>
          <li>中文列表</li>
        </ul>
      </li>
      <li>中文列表</li>
    </ol>
  

字母列表

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

  1. 字母列表
  2. 字母列表
    • 字母列表
    • 字母列表
    • 字母列表
  3. 字母列表
    <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定义