Bootstrap 4 分页
基本分页
如果你有一个包含很多页面的网站，你可能希望在每个页面上添加一些分页。
要创建一个基本的分页，将 .pagination 类添加到 <ul> 元素中。然后将 .page-item 类添加到每个 <li> 元素中，并将 .page-link 类添加到每个 <li> 元素中的链接中。
示例
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</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="#">下一页</a></li>
</ul>
自己尝试 »
活动状态
.active 类用于“突出显示”当前页面。
示例
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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="#">下一页</a></li>
</ul>
自己尝试 »
禁用状态
.disabled 类用于不可点击的链接。
示例
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">上一页</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="#">下一页</a></li>
</ul>
自己尝试 »
分页大小
分页块也可以调整为更大或更小。
添加类 .pagination-lg 用于更大的块或 .pagination-sm 用于更小的块。
示例
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">上一页</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="#">下一页</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">上一页</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="#">下一页</a></li>
</ul>
自己尝试 »
分页对齐
使用工具类来更改分页的对齐方式。
示例
<!-- 默认（左对齐） -->
<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- 居中对齐 -->
<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- 右对齐 -->
<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
自己尝试 »
提示：在我们的 BS4 工具类章节 中了解有关 Bootstrap 4 工具类/辅助类的更多信息。
面包屑
分页的另一种形式是面包屑。
.breadcrumb 和 .breadcrumb-item 类指示当前页面在导航层次结构中的位置。
示例
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">照片</a></li>
<li class="breadcrumb-item"><a href="#">2017 年夏季</a></li>
<li class="breadcrumb-item"><a href="#">意大利</a></li>
<li class="breadcrumb-item active">罗马</li>
</ul>
自己尝试 »
