bootstrap 表格分页

要在 Bootstrap 表格中添加分页，可以使用 Bootstrap 的分页组件和 jQuery 插件 DataTables。

首先，你需要在页面中引入 Bootstrap 和 jQuery 库以及 DataTables 插件的 CSS 和 JavaScript 文件。可以通过下面的代码来实现：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/datatables/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>

然后，在 HTML 中添加一个表格和一个分页组件，如下所示：

<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>22</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </tbody>
</table>
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

接下来，使用 DataTables 插件来初始化表格和分页组件，如下所示：

$(document).ready(function() {
  $('#example').DataTable();
});

这样就可以在 Bootstrap 表格中添加分页了。如果你想调整分页组件的样式或者修改每一页显示的数据量，可以查看 DataTables 插件的文档进行设置。