在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;... ...></code></div>
pre风格:
<div><pre>&It;... ...></pre></div>
kbd风格:
<div>请输入<kbd>...</kbd></div>
不管使用哪种代码风格，在代码中碰到小于号(<)要使用硬编码"&It;"替代，大于号(>)使用">"来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议间编写HTML标签时，就控制好。
正如前面所示，<pre>元素一般用于显示大块的代码，并且保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名".pre-scrollable"，就可以控制代码块区域最大高度为340px，一旦超出这个高，就会在Y轴出现滚动条。
/*源码请查看bootstrap.css第731行~第734行*/
.pre-scrollable{max-height:340px;overflow-y:scroll;}
网友评论