Bootstrap 表

Bootstrap 是一个流行的前端框架，提供了许多样式和组件，用于开发响应式、移动端友好的网站。表格是其中一个常用的组件，用于展示数据或排版内容。在本文中，我们将介绍 Bootstrap 表格的常用样式和用法。

基础样式

Bootstrap 基础表格样式非常简洁，只有基本的行、单元格边框和字体大小。以下是基本的 HTML 和渲染后的表格：

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

可以使用 .table-striped 类添加斑马纹样式：

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

使用 .table-hover 类可以让鼠标悬停在单元格时高亮：

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

边框和填充

Bootstrap 表格也可以添加边框和内填充，可以使用以下类：

• .table-bordered - 添加边框
• .table-borderless - 去掉边框
• .table-sm - 缩小表格
• .table-responsive - 配合栅格系统自适应屏幕大小

<table class="table table-bordered table-sm">
  ...
</table>

<table class="table table-borderless">
  ...
</table>

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

显示数据

Bootstrap 表格也支持不同的数据类型，比如按钮、链接和图片等。以下是一些示例：

按钮：

<table class="table">
  <tbody>
    <tr>
      <td><button type="button" class="btn btn-primary">Primary</button></td>
      <td><button type="button" class="btn btn-secondary">Secondary</button></td>
      <td><button type="button" class="btn btn-success">Success</button></td>
      <td><button type="button" class="btn btn-danger">Danger</button></td>
    </tr>
  </tbody>
</table>

链接：

<table class="table">
  <tbody>
    <tr>
      <td><a href="#">Link</a></td>
      <td><a href="#">Another link</a></td>
      <td><a href="#">Third link</a></td>
      <td><a href="#">Fourth link</a></td>
    </tr>
  </tbody>
</table>

图片：

<table class="table">
  <tbody>
    <tr>
      <td><img src="https://via.placeholder.com/150"></td>
      <td><img src="https://via.placeholder.com/150"></td>
      <td><img src="https://via.placeholder.com/150"></td>
      <td><img src="https://via.placeholder.com/150"></td>
    </tr>
  </tbody>
</table>

总结

以上是 Bootstrap 表格的一些常用样式和用法，通过简单的 HTML 代码可以轻松地创建美观的表格。希望本文对您有所帮助。