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表格的几个常用样式,通过不同的类可以实现不同的效果。在实际开发中,可以根据需要选择相应的样式,快速地构建出美观的表格。