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

在bootstrap中通过定义四个类名来控制文本的对齐方式：

.text-left:文本左对齐

.text-center:文本居中对齐

.text-right:文本右对齐

.text-justify:文本两端对齐

.text-muted:提示，使用浅灰色

.text-primary:主要，使用蓝色

.text-success:成功，使用浅绿色

.text-info:通知信息，使用浅蓝色

.text-warning:警告，使用黄色

.text-danger:危险，使用褐色 确切的应该是红色吧

在排版中，除了用加粗来强调突出的文本之外，还可以使用斜体。斜体类似于加粗一样，除了可以给元素设置样式font-size值为italic实现之外，在bootstrap中还可以通过<em>或<i>来实现。

表单控件大小

前面看到的表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input，textarea和select控件，具体使用如下：

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大"> <input class="form-control" type="text" placeholder="正常大小"> <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

表单控件(复选框和单选按钮水平排列)

有时候，为了布局的需要，将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑：
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
如下所示：

<form role="form">   <div class="form-group">     <label class="checkbox-inline">       <input type="checkbox"  value="option1">游戏     </label>     <label class="checkbox-inline">       <input type="checkbox"  value="option2">摄影     </label>     <label class="checkbox-inline">     <input type="checkbox"  value="option3">旅游     </label>   </div>

表单控件(文本域textarea)

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">   <div class="form-group">     <textarea class="form-control" rows="3"></textarea>   </div> </form>

表单控件(输入框input)

每一个表单都是由表单控件组成。离开了控件，表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。

单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。

为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如：

<form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email"> </div> </form>

运行效果如下或查看右侧结果窗口:

水平表单

<form class="form-horizontal" role="form">

表格--响应式表格

随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：

<div class="table-responsive"> <table class="table table-bordered">    … </table> </div>

表格--紧凑型表格

何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。

紧凑型表格的运用，也只是需要在<table class="table">基础上添加类名“table-condensed”：

<table class="table table-condensed"> … </table>

鼠标悬浮高亮的表格

<table class="table table-hover">
…
</table>

表格--斑马线表格

有时候为了让表格更具阅读性，需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难，只需要在<table class="table">的基础上增加类名“.table-striped”即可：

<table class="table table-striped"> … </table>

表格.table

“.table”主要有三个作用：

    给表格设置了margin-bottom:20px以及设置单元内距

    在thead底部设置了一个2px的浅灰实线

    每个单元格顶部设置了一个1px的浅灰实线

表格--表格行的类

Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

其使用非常的简单，只需要在<tr>元素中添加上表对应的类名，就能达到你自己需要的效果：

<tr class="active">     <td>…</td> </tr>

如要实现悬浮状态，需要在<table>标签上加入table-hover类

<table class="table-hover">