元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在 <strong>pre标签</strong> 上添加类名 .pre-scrollable ，就可以控制代码块区域 <strong>最大高度为340px</strong> ，一旦超出这个高度，就会在 <strong>Y轴（纵向）出现滚动条。</strong> </p>    <p> 当然，你也可以进行自定义配置，例如：只需要在自定义的css中，对于该类添加一个 word-wrap: normal; ，这样的话，在代码块边框横向宽度小于内部代码横向长度时，就会出现横向滚动条。 </p>    <h2>7. 表格</h2>    <p> 表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了 <strong>1种基础样式</strong> 和 <strong>4种附加样式</strong> 以及 <strong>1个支持响应式的表格</strong> 。 </p>    <p>对应上面所说的，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：</p>    <table>          <tr>           <th> .table </th>      <th>基础表格</th>     </tr>     <tr>           <td> .table-striped </td>      <td>斑马线表格</td>     </tr>     <tr>           <td> .table-bordered </td>      <td>带边框的表格</td>     </tr>     <tr>           <td> .table-hover </td>      <td>鼠标悬停高亮的表格</td>     </tr>     <tr>           <td> .table-condensed </td>      <td>紧凑型表格</td>     </tr>     <tr>           <td> .table-responsive </td>      <td>响应式表格</td>     </tr>     </table>    <p> .table 主要有三个作用： </p>    <ul>         <li>给表格设置了margin-bottom:20px以及设置单元内距</li>     <li>在thead底部设置了一个2px的浅灰实线</li>     <li>每个单元格顶部设置了一个1px的浅灰实线</li>    </ul>    <p> 具体大家可以在源码中查看，后几种附加的样式在这里也不多说，但是下面说一些 <strong>注意事项：</strong> </p>    <ol>         <li> 后几种表格附加样式，必须在基础样式 .table 之后，例如 <table class="table table-bordered table-hover"> </li>     <li> 响应式表格：其原理是在表格 <strong>外部添加容器</strong> 把普通表格 <strong>包裹</strong> 起来，下面进行详细说明： </li>    </ol>    <p>         <p>           <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><div class="table-responsive"><!-- 关键！容器包裹后实现响应式 -->   <table class="table table-bordered"><!-- 设置表格样式，带边框的表格 -->   <thead><!-- 一个表格应该有表头，若直接写tr>td这样的结构，浏览器会自动创建一个tbody包裹 -->   </thead>   <tbody><!--与上同理，即使你不创建，浏览器也会自动添加tbody包裹你的代码 -->   </tbody> </table> </div>