一、HTML的列表
在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
1、无序列表
<ul>
<li>…</li>
</ul>
2、有序列表
<ol>
<li>…</li>
</ol>
3、定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
二、Bootstrap列表
Bootstrap根据平时的使用情形提供了六种形式的列表：
☑ 普通列表
☑ 有序列表
☑ 去点列表
☑ 内联列表
☑ 描述列表
☑ 水平描述列表
三、无序列表、有序列表
无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用ul，有序列表使用ol标签）
在样式方面，Bootstrap只是在此基础上做了一些细微的优化，源码请查看bootstrap.css文件的第569行~第579行
从源码上我们可以得知，Bootstrap对于列表，只是在margin上做了一些调整。
在Bootstrap中列表也是可以嵌套的
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>普通列表、有序列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
<h5>普通列表</h5>
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
<h5>有序列表</h5>
<ol>
<li>项目列表一</li>
<li>项目列表二</li>
<li>项目列表三</li>
</ol>
<h5>有序列表嵌套</h5>
<ol>
<li>有序列表</li>
<li>
有序列表
<ol>
<li>有序列表(2)</li>
<li>有序列表(2)</li>
</ol>
</li>
<li>有序列表</li>
</ol> </body>
</html>
四、去点列表
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。
Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。（源码请查看bootstrap.css文件第580行~第583行）
除了项目编号之外，还将列表默认的左边内距也清０了。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>去点列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
<!--无序列表去点-->
<ul>
<li>
项目列表
<ul>
<li>带有项目符号</li>
<li>带有项目符号</li>
</ul>
</li>
<li>
项目列表
<ul class="list-unstyled">
<li>不带项目符号</li>
<li>不带项目符号</li>
</ul>
</li>
<li>项目列表</li>
</ul>
<!--有序列表去序号-->
<ol>
<li>
项目列表
<ol>
<li>带有项目编号</li>
<li>带有项目编号</li>
</ol>
</li>
<li>
项目列表
<ol class="list-unstyled">
<li>不带项目编号</li>
<li>不带项目编号</li>
</ol>
</li>
<li>项目列表</li>
</ol>
</body>
</html>
五、内联列表
Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
也可以说内联列表就是为制作水平导航而生。（源码查看bootstrap.css文件第584行~第593行）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>内联列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul> </body>
</html>
六、定义列表
对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。（源码请查看bootstrap.css文件第594行~第607行）
对于定义列表使用，其实很简单，与我们以前的使用定义列表的方法是相同的
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定义列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd>一个真心在做教育的网站</dd>
</dl> </body>
</html>