列表，代码

在HTML文档中，列表结构主要有三种，有序列表、无序列表和定义列表。具体使用的标签说明如下:

无序列表<ul><li>...</li></ul>

有序列表<ol><li>...</li></ol>

定义列表<dl><dt>...</dt><dd>...</dd></dl>

Bootstrap根据平时的使用情形提供了六种形式的列表：

无序列表

无序列表和有序列表使用方式和我们平时使用的一样(无序列表使用ul,有序列表使用ol标签)，在样式方面，Bootstrap只是在此基础上做了一些细微的优化，源码请查看bootstrap.css文件的第569行~第579行:

ul,ol{margin-top:0;margin-bottom:10px;}

ul ul,ol ul,ul ol,ol ol{margin-bottom:0;}

从源码上我们可以得知，Bootstrap对于列表，只是在margin上面做了一些调整。

去点列表

在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名".list-unstyled",这样就可以去除默认的列表样式的风格。

/*源码请查看bootstrap.css文件第580行~第583行*/

.list-unstyled{padding-left:0;list-style:none;}

从示例中可以看出，除了项目编号之外，还将列表默认的左边内距也清0了。

内联列表

Bootstrap像去点列表一样，通过添加类名".list-inline"来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。

/*源码查看bootstrap.css文件第584行~第593行*/

.list-inline{padding-left:0;margin-left:-5px;list-style:none;}

.list-inline > li{display:inline-block;padding-right:5px;padding-left:5px;}

定义列表

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果

/*源码请查看bootstrap.css文件第594行~第607行*/

dl{margin-top:0;margin-bottom:20px;}

dt,dd{line-height:1.42857143;}

dt{font-weight:bold;}

dd{margin-left:0;}

水平定义列表

水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名".dl-horizontal"给定义列表实现水平显示效果。

/*源码请查看bootstrap.css文件第608行~第621行*/

@media(min-width:768px){

.dl-horizontal  dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap;}

.dl-horizontal dd{margin-left:180px;}

}

此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名".dl-horizontal"才具有水平定义列表效果。其实现主要方式：

①.将dt设置了一个左浮动，并且设置了一个宽度为160px;②.将dd设置了一个margin-left的值为180px,达到水平的效果;③.将标题宽度超过160px时，将会显示三个省略号。

代码

在Bootstrap主要提供了三种代码风格:

1.使用<code></code>来显示单行内联代码

2.使用<pre></pre>来显示多行块代码

3.使用<kbd></kbd>来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来:

1.LESS版本，请查阅code.less文件

2.Sass版本，请查阅_code.scss文件

编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行，由于代码太长，此处不一一例举。

在使用代码时，用户可以根据具体的需求来使用不同的类型：

1.<code>:一般是针对单个单词或单个句子的代码

2.<pre>：一般是针对多行代码(也就是成块的代码)

3.<kbd>：一般是表示用户通过键盘输入的内容

虽然不同的类型风格不一样，但其使用方法是类似的。

code风格：

<div><code>&It;... ...&gt;</code></div>

pre风格:

<div><pre>&It;... ...&gt;</pre></div>

kbd风格:

<div>请输入<kbd>...</kbd></div>

不管使用哪种代码风格，在代码中碰到小于号(<)要使用硬编码"&It;"替代，大于号(>)使用"&gt;"来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议间编写HTML标签时，就控制好。

正如前面所示，<pre>元素一般用于显示大块的代码，并且保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名".pre-scrollable"，就可以控制代码块区域最大高度为340px，一旦超出这个高，就会在Y轴出现滚动条。

/*源码请查看bootstrap.css第731行~第734行*/

.pre-scrollable{max-height:340px;overflow-y:scroll;}