Bootstrap 代码

Bootstrap 允许您以两种方式显示代码：

• 第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。

• 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： &lt; 和 &gt;。

让我们来看看下面的实例：

实例展示如下图：

更多实例

Bootstrap 表格

表格类

下表样式可用于表格中：

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格：

基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：

结果如下所示：

可选的表格类

除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

通过添加 .table-striped class，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：

结果如下所示：

边框表格

通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

结果如下所示：

悬停表格

通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：

结果如下所示：

精简表格

通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

结果如下所示：

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

这些类可被应用到 <tr>、<td> 或 <th>。

结果如下所示：

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

结果如下所示：