在 Bootstrap 中自定义分页链接

Bootstrap 是一种流行的前端框架，它提供了丰富的样式和组件，使得开发者可以快速地构建出美观、响应式的网页应用。其中，分页链接（pagination）是一种常见的 UI 组件，用于将长列表分页显示，提高用户体验。

然而，Bootstrap 默认的分页链接可能不符合你的需求，比如链接样式、显示总条目数等方面。因此，我们需要自定义分页链接，以满足自己的设计和功能要求。

本文将介绍如何在 Bootstrap 中自定义分页链接，包括链接样式、显示总条目数、跳转到指定页码等功能。

分页链接基本用法

在 Bootstrap 中，我们可以通过添加 pagination 类来创建分页链接：

<nav>
  <ul class="pagination">
    <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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
  </ul>
</nav>

上面的代码创建了一个具有五个页码的分页链接组件。其中，page-item 和 page-link 类分别用于定义分页项和链接样式，可以自行修改。

自定义链接样式

Bootstrap 默认的分页链接样式可能与您的网站主题不符，为此我们可以自定义链接样式，如下所示：

<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link bg-primary text-white" href="#">1</a></li>
    <li class="page-item"><a class="page-link bg-secondary text-white" href="#">2</a></li>
    <li class="page-item"><a class="page-link bg-success text-white" href="#">3</a></li>
    <li class="page-item"><a class="page-link bg-danger text-white" href="#">4</a></li>
    <li class="page-item"><a class="page-link bg-warning text-white" href="#">5</a></li>
  </ul>
</nav>

上面的代码定义了不同颜色的链接背景，可以根据自己的实际情况来选择。

显示总条目数

如果您想在分页链接中显示总条目数，可以使用 Bootstrap 提供的 badge 类。例如：

<nav>
  <ul class="pagination">
    <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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5 <span class="badge badge-secondary">100</span></a></li>
  </ul>
</nav>

上面的代码为最后一个分页链接添加了一个小标记，用于显示总共有多少条目数。

跳转到指定页码

最后，您可能还需要为分页链接添加跳转到指定页码的功能。这可以使用 JavaScript 实现。例如：

<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#" onclick="paging(1)">1</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="paging(2)">2</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="paging(3)">3</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="paging(4)">4</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="paging(5)">5</a></li>
  </ul>
</nav>

<script>
function paging(page) {
  // TODO: 处理跳转
  console.log('跳转到第 ' + page + ' 页')
}
</script>

上面的代码为每个分页链接添加了 onclick 事件，当用户单击链接时，将会触发 paging(page) 函数，其中 page 参数为用户要跳转的页码。您可以在该函数中处理具体的跳转逻辑，比如将页面 URL 更新为新的地址。

总结

本文介绍了如何在 Bootstrap 中自定义分页链接，包括链接样式、显示总条目数、跳转到指定页码等功能。您可以根据自己的实际需要，选择其中的一些或全部添加到您的网站或应用中。