使用Bootstrap构建可折叠WBS结构表格

本教程将引导您使用Bootstrap框架创建一个功能齐全的WBS（工作分解结构）表格，该表格支持中文显示，并包含以下功能：

以树形结构展示WBS节点，清晰展示层级关系
显示节点名称、类型、所属阶段、责任人、计划时间、实际时间、状态、前置计划和后置计划等详细信息
提供新建、编辑、删除、送审和调整等操作按钮

以下是完整的HTML代码，您可以直接复制到HTML文件中，并在浏览器中打开查看效果：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <link rel='stylesheet' href='https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css'>
  <title>WBS结构</title>
  <style>
    /* 为表格添加一些样式 */
    .table th, .table td {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class='container'>
    <h1>WBS结构</h1>
    <div class='mb-3'>
      <button class='btn btn-primary'>新建</button>
      <button class='btn btn-primary'>编辑</button>
      <button class='btn btn-primary'>删除</button>
      <button class='btn btn-primary'>送审</button>
      <button class='btn btn-primary'>调整</button>
    </div>
    <table class='table table-bordered'>
      <thead>
        <tr>
          <th>节点名称</th>
          <th>节点类型</th>
          <th>节点所属阶段</th>
          <th>责任人</th>
          <th>计划开始时间</th>
          <th>计划结束时间</th>
          <th>实际开始时间</th>
          <th>实际结束时间</th>
          <th>状态</th>
          <th>前置计划</th>
          <th>后置计划</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>节点1</td>
          <td>类型1</td>
          <td>阶段1</td>
          <td>责任人1</td>
          <td>2021-01-01</td>
          <td>2021-01-10</td>
          <td>2021-01-02</td>
          <td>2021-01-09</td>
          <td>进行中</td>
          <td>前置计划1</td>
          <td>后置计划1</td>
        </tr>
        <tr>
          <td>节点2</td>
          <td>类型2</td>
          <td>阶段1</td>
          <td>责任人2</td>
          <td>2021-01-10</td>
          <td>2021-01-20</td>
          <td>2021-01-11</td>
          <td>2021-01-19</td>
          <td>进行中</td>
          <td>前置计划2</td>
          <td>后置计划2</td>
        </tr>
        <tr>
          <td>节点3</td>
          <td>类型1</td>
          <td>阶段2</td>
          <td>责任人3</td>
          <td>2021-01-20</td>
          <td>2021-01-30</td>
          <td>2021-01-21</td>
          <td>2021-01-29</td>
          <td>进行中</td>
          <td>前置计划3</td>
          <td>后置计划3</td>
        </tr>
        <tr>
          <td>节点4</td>
          <td>类型2</td>
          <td>阶段2</td>
          <td>责任人4</td>
          <td>2021-01-30</td>
          <td>2021-02-10</td>
          <td>2021-01-31</td>
          <td>2021-02-09</td>
          <td>进行中</td>
          <td>前置计划4</td>
          <td>后置计划4</td>
        </tr>
        <tr>
          <td>节点5</td>
          <td>类型1</td>
          <td>阶段3</td>
          <td>责任人5</td>
          <td>2021-02-10</td>
          <td>2021-02-20</td>
          <td>2021-02-11</td>
          <td>2021-02-19</td>
          <td>进行中</td>
          <td>前置计划5</td>
          <td>后置计划5</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src='https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js'></script>
  <script src='https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js'></script>
  <script src='https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
</body>
</html>

注意：

为了实现完整的树形结构和功能，您需要添加 JavaScript 代码来处理节点的折叠/展开、数据的增删改查等操作。
本示例仅提供了一个基础的WBS表格结构，您可以根据实际需求进行扩展和修改。

希望本教程能够帮助您使用Bootstrap构建功能强大的WBS结构表格！