宽屏下的效果（屏幕大于768px）：
当你缩小你的浏览器屏幕时，水平定义列表将回复到原始的状态。
本节内容相对来说比较简单，一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
1、使用来显示单行内联代码 2、使用
预编译版本的Bootstrap将代码的样式单独提取出来： 1、LESS版本，请查阅code.less文件 2、Sass版本，请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行，由于代码太长，此处不一一列举。
在使用代码时，用户可以根据具体的需求来使用不同的类型： 1、：一般是针对于单个单词或单个句子的代码 2、：一般是针对于多行代码（也就是成块的代码） 3、:一般是表示用户要通过键盘输入的内容 虽然不同的类型风格不一样，但其使用方法是类似的。 code风格：
Bootstrap的代码风格有三种：<code>、<pre>和<kbd> pre风格：
<ul> <li>...</li> <li>...</li> <li>...</li> </ul>kbd风格：
请输入ctrl+c来复制代码，然后使用ctrl+v来粘贴代码 不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于
代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议在编写HTML标签时，就控制好，例如查看右侧代码编辑器上的15-19行。代码（二）
正如前面所示，
元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。 /*源码请查看bootstrap.css第731行~第734行*/.pre-scrollable { max-height: 340px; overflow-y: scroll; } 友情提示：如果您了解LESS或Sass这样的CSS预定定义处理器，你完全可以通过code.less或者_code.scss文件修改样式，然后重新编译，你就可以得到属于自己的代码样式风格。
表格
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。 同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： ? LESS版本，对应的文件是 tables.less ? Sass版本，对应的文件是 _tables.scss
如果你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行~第1630行中可以查阅到所有有关于table的样式代码。由于代码太长，此处不一一列举。 刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
?
.table：基础表格
? .table-striped：斑马线表格 ? .table-bordered：带边框的表格 ? .table-hover：鼠标悬停高亮的表格 ? .table-condensed：紧凑型表格 ? .table-responsive：响应式表格
表格--表格行的类
Bootstrap还为表格的行元素提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
其使用非常的简单，只需要在元素中添加上表对应的类名，就能达到你自己需要的效果：
…
对应的源码，请查看bootstrap.css文件中第1484行~第1583行。
特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。
注意要实现悬浮状态，需要在标签上加入table-hover类。 如下代码：
大家对表格并不太陌生，但对于Bootstrap中的表格如何使用，或许还有点陌生，接下来的内容，将根据不同的表格类型向大家介绍Bootstrap表格的实际使用方法。 对表格的结构，跟我们平时使用表格是一样的：
表格单元格 … …
表格标题 …如无特别声明，下面介绍表格类型的时候，结构都是类似上面的代码。 基础表格
在Bootstrap中，对于基础表格是通过类名“.table”来控制。如果在元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在元素上添加“.table”类名，就可以得到Bootstrap的基础表格：
… Bootstrap的基础表格，大致长得像下图所示的样子：
主要源码查看bootstrap.css文件第1402行～第1441行，由于代码太长，此处不一一列举。 “.table”主要有三个作用：
? 给表格设置了margin-bottom:20px以及设置单元内距 ? 在thead底部设置了一个2px的浅灰实线 ? 每个单元格顶部设置了一个1px的浅灰实线
表格--斑马线表格
有时候为了让表格更具阅读性，需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难，只需要在
其效果与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。其实现原理也非常的简单，利用CSS3的结构性选择器“:nth-child”来实现，所以对于IE8以及其以下浏览器，没有背景条纹效果。
源码请查看bootstrap.css文件第1465行~第1468行：
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; } 表格--带边框的表格
基础表格仅让表格部分地方有边框，但有时候需要整个表格具有边框效果。Bootstrap出于实际运用，也考虑这种表格效果，即所有单元格具有一条1px的边框。
Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似，只需要在基础表格
样式如下图所示：