Bootstrap 是一个流行的前端框架，它提供了许多易于使用的组件来帮助开发者快速构建响应式和美观的网页。表格是网页中常见的一种元素，Bootstrap 也提供了强大的表格组件，使得创建和定制表格变得简单快捷。以下是关于 Bootstrap 表格的实用教程与实例解析，帮助新手轻松掌握这一功能。

Bootstrap 表格基础

Bootstrap 表格组件是基于 HTML 的，它允许你创建带有条纹、边框、悬停效果、缩放等样式的基础表格。以下是一个简单的 Bootstrap 表格示例：

<table class="table">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品 A</td>
      <td>100</td>
      <td>5</td>
    </tr>
    <tr>
      <td>产品 B</td>
      <td>150</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

在这个例子中，<table class="table"> 定义了一个表格，.table 类使得表格具有默认样式。<thead> 和 <tbody> 分别代表表头和表体，而 <tr> 和 <th> 则代表行和表头单元格，<td> 代表表体单元格。

表格样式

Bootstrap 提供了多种表格样式，以下是一些常用的样式：

  • .table-striped：条纹表格
  • .table-bordered：边框表格
  • .table-hover：鼠标悬停效果
  • .table-condensed：紧凑表格

例如，以下是一个带有条纹、边框和鼠标悬停效果的表格：

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品 A</td>
      <td>100</td>
      <td>5</td>
    </tr>
    <tr>
      <td>产品 B</td>
      <td>150</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

可折叠表格

Bootstrap 还提供了可折叠表格的功能，允许用户通过点击表头来展开或折叠行。以下是一个可折叠表格的示例：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          产品 A
        </a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">
        <table class="table">
          <thead>
            <tr>
              <th>属性</th>
              <th>值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>价格</td>
              <td>100</td>
            </tr>
            <tr>
              <td>数量</td>
              <td>5</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          产品 B
        </a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        <table class="table">
          <thead>
            <tr>
              <th>属性</th>
              <th>值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>价格</td>
              <td>150</td>
            </tr>
            <tr>
              <td>数量</td>
              <td>3</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

在这个例子中，.panel-group 定义了一个可折叠的容器，.panel 定义了每个可折叠的组件，.panel-heading 定义了标题，.panel-collapse 定义了可折叠的内容。data-toggle="collapse" 和 data-parent="#accordion" 属性用于控制折叠行为。

实例解析

以下是一个包含多个样式的 Bootstrap 表格实例：

<div class="container">
  <h2>产品列表</h2>
  <table class="table table-striped table-bordered table-hover table-condensed">
    <thead>
      <tr>
        <th>名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>产品 A</td>
        <td>100</td>
        <td>5</td>
        <td>
          <button class="btn btn-primary">编辑</button>
          <button class="btn btn-danger">删除</button>
        </td>
      </tr>
      <tr>
        <td>产品 B</td>
        <td>150</td>
        <td>3</td>
        <td>
          <button class="btn btn-primary">编辑</button>
          <button class="btn btn-danger">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

在这个例子中，我们创建了一个包含多个样式的表格，包括条纹、边框、鼠标悬停效果、紧凑和操作按钮。通过使用 Bootstrap 的类和组件，我们可以轻松地创建美观且功能丰富的表格。

通过以上教程和实例解析，新手可以轻松掌握 Bootstrap 表格的创建和定制方法。希望这些信息能帮助你更好地利用 Bootstrap 来构建优秀的网页。