Bootstrap 分页器

Bootstrap 分页器是一种用于分页的 UI 组件，使用 Bootstrap 分页器可以方便地实现数据分页显示。

基本用法

首先引入 Bootstrap 样式文件，以及 jQuery 和 Bootstrap 的 JavaScript 文件。然后在 HTML 中添加分页器的容器和必要的元素，如下所示：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item active"><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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

其中，<nav> 元素用于在分页器周围添加一些额外的样式和语义信息，aria-label 属性用于指定分页器的用途。<ul> 元素指定了分页器的容器，其中的 <li> 元素指定了每一个分页按钮。disabled 类用于指定禁用状态的按钮，active 类则用于指定当前选中状态的按钮。

分页变化

如果需要响应分页变化事件，可以使用 Bootstrap 提供的 page 事件。例如：

$('.pagination').on('page', function (event, num) {
  console.log('Page ' + num + ' was clicked!');
});

其他选项

Bootstrap 分页器还提供了很多选项用于定制分页器的外观和行为。具体见 官方文档。

以上就是 Bootstrap 分页器的基本用法和功能介绍。