1.<ul>无序、<ol>有序
<h5>普通列表</h5> <ul> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li> </ul> <h5>有序列表</h5> <ol> <li>项目列表一</li> <li>项目列表二</li> <li>项目列表三</li> </ol>
2.去点列表
给列表添加.list-unstyled,可以去除默认列表样式风格。
<ol> <li>有序项目列表一</li> <li>有序项目列表二</li> <ol class="list-unstyled"> <li>有序二级列表项目列表一</li> <li>有序二级列表项目列表二</li> <ul> <li>无序三级项目列表一</li> <li>无序三级列表项目二</li> <ul class="list-unstyled"> <li>无序四级项目列表一</li> <li>无序四级列表项目二</li> </ul> <li>无序三级项目列表三</li> </ul> <li>有序二级项目列表三</li> </ol> <li>有序项目列表三</li> </ol>
3.列表--内联列表
通过添加类名“.list-inline”来实现内联列表,把垂直列表转换为水平列表,而且去除项目符号,保持水平显示。
<ul class="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li> </ul>
4.定义列表
<dl> <dt>定义列表标题</dt> <dd>定义列表信息1</dd> <dd>定义列表信息2</dd> </dl
5.列表--水平定义列表
Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
<dl class="dl-horizontal"> <dt>W3cplus</dt> <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文 </dd> </dl>