Bootstrap4 分页
Bootstrap4 分页
Bootstrap4 分页是一种用于展示大量数据列表、分页展示的组件，其可以让用户更方便地找到和浏览所需的内容。Bootstrap4 分页可以实现很多种不同的分页展示效果，符合大部分的分页需求。Bootstrap4 分页在UI设计上是一个非常重要的组件，下面我们来详细了解一下Bootstrap4 分页。
基本用法
Bootstrap4 分页可以通过 <nav> 元素和 .pagination 类来创建，其中，.page-item 类表示每一个分页项，.page-link 类表示分页项中的链接，分别可以设置不同的样式。比如，我们可以通过以下代码来创建一个基本的Bootstrap4 分页：
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
</nav>
禁用分页项
如果分页项没有数据或状态不可用，则可以通过添加 .disabled 类让分页项失效，使用者无法点击。比如我们可以通过以下代码来禁用“Previous”按钮：
<nav>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
</nav>
分页大小
有时候，我们需要控制每页显示的记录数量，Bootstrap4 分页也提供了对应的类来实现。我们可以使用 .pagination-sm 或 .pagination-lg 来控制分页大小，比如：
<nav>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
</nav>
分页颜色
Bootstrap4 分页还提供了多种不同的颜色样式，使用者可以根据自己的需求来调整。分页的颜色样式类名与按钮相同。比如，我们可以使用 .btn-primary 类使分页颜色变成蓝色：
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link btn-primary" href="#">Previous</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 btn-primary" href="#">Next</a></li>
</ul>
</nav>
总结
总的来说，Bootstrap4 分页组件是一种非常实用的UI组件，灵活性也比较高，基本满足大部分需求。上述介绍的内容就是Bootstrap4 分页的基本用法，实际使用中需要根据具体情况进行调整。