Bootstrap 4 分页
如果内容太多，可以做分页处理。因为常见，所以 Bootstrap 提供了专门的分页组件
基本的分页
可以在 <ul> 元素上添加 .pagination CSS 类和在 <li> 元素上添加 .page-item CSS 类来创建一个基本的分页组件
<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>
分页中的当前页
可以在 <li> 上添加 .active CSS 类来设置当前页的状态
<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>
不可点击的分页链接
可以在 <li> 上添加 .disabled CSS 类来设置分页链接不可点击
<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>