Bootstrap 的分页组件实现分页

Bootstrap 的分页组件非常易于使用，可以方便地实现分页功能。以下是实现分页的简单步骤：

1. 在 HTML 中添加分页组件的基本结构：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

2. 在 JavaScript 中添加分页功能：

// 获取分页组件
var pagination = document.querySelector('.pagination');

// 获取所有页码链接
var pageLinks = pagination.querySelectorAll('a.page-link');

// 给每个页码链接添加点击事件
pageLinks.forEach(function(pageLink) {
  pageLink.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止链接默认跳转行为
    var pageNum = parseInt(this.innerHTML); // 获取点击的页码
    // TODO: 根据页码获取相应数据并更新页面内容
  });
});

// 获取“上一页”和“下一页”链接
var prevLink = pagination.querySelector('a[aria-label="Previous"]');
var nextLink = pagination.querySelector('a[aria-label="Next"]');

// 给“上一页”和“下一页”链接添加点击事件
prevLink.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止链接默认跳转行为
  var pageNum = parseInt(pagination.querySelector('.active').querySelector('a').innerHTML); // 获取当前页码
  pageNum--; // 上一页页码
  if (pageNum < 1) {
    pageNum = 1; // 页码不能小于 1
  }
  // TODO: 根据页码获取相应数据并更新页面内容
});

nextLink.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止链接默认跳转行为
  var pageNum = parseInt(pagination.querySelector('.active').querySelector('a').innerHTML); // 获取当前页码
  pageNum++; // 下一页页码
  if (pageNum > pageLinks.length) {
    pageNum = pageLinks.length; // 页码不能大于总页数
  }
  // TODO: 根据页码获取相应数据并更新页面内容
});

// 默认选中第一页
pageLinks[0].parentNode.classList.add('active');

以上代码只是一个简单的示例，具体实现还需要根据具体需求进行相应修改。