Bootstrap 表格
Bootstrap是一种基于 HTML、CSS、JavaScript 的流行的前端框架，Bootstrap提供了一系列可用的组件和工具，省去了很多重复的CSS编码工作。其中表格是网页开发中经常使用的一个元素，在Bootstrap中，我们可以使用一些类来简单地实现一个美观的表格。
基础表格
Bootstrap最基础的表格样式是通过table元素和table类来实现的，通常结合thead、tbody和tfoot来使用。表头使用thead标签，表格主体使用tbody标签，表脚使用tfoot标签。
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
thead中的tr定义表头行，tbody中的tr定义表格内容的行。其中，第一个列一般使用th元素。
带边框的表格
如果需要给表格添加边框，可以使用table-bordered类。下面是一个带边框的表格的例子。
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
带颜色的表格
Bootstrap提供了几个用于给表格添加颜色的类，分别是：用于添加浅灰色背景的table-striped，用于添加深灰色背景的table-dark。这两个类可以结合使用，下面是一个带颜色的表格的例子。
<table class="table table-striped table-dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
响应式表格
如果需要在手机或平板电脑上显示适当的宽度，可以使用table-responsive类。下面是一个响应式表格的例子。
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
以上是Bootstrap表格的几个常用样式，通过不同的类可以实现不同的效果。在实际开发中，可以根据需要选择相应的样式，快速地构建出美观的表格。