Bootstrap列表
一、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>
