Bootstrap 分页 定义和使用 如果您的网站上有很多页面,则可能希望在每个页面上添加某种分页。 要创建 Bootstrap 的分页,请将 .pagination 类添加到 <ul> 元素。 然后将 .page-item 添加到每个 <li> 元素,并将 .page-link 类添加到 <li> 内部的每个链接: <div class="container"> <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> </div> 复制尝试一下 激活状态 .active 类用于“突出显示”当前页面: <div class="container"> <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> </div> 复制尝试一下 禁用状态 .disabled 类用于不可点击的链接: <div class="container"> <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> </div> 复制尝试一下 分页大小 分页块也可以调整为更大或更小的尺寸。 为较大的块添加 .pagination-lg 类,为较小的块添加 .pagination-sm 类: <div class="container"> //.pagination-lg 调整为大的 <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> //.pagination-sm 调整为小的 <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> </div> 复制尝试一下 分页对齐 使用实用程序类来更改分页的对齐方式: <div class="container"> //默认左对齐的 <ul class="pagination" style="margin:20px 0"> <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> //.justify-content-center 居中对齐的 <ul class="pagination justify-content-center" style="margin:20px 0"> <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> //.justify-content-end 右对齐的 <ul class="pagination justify-content-end" style="margin:20px 0"> <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> </div> 复制尝试一下 面包屑 分页的另一种形式是面包屑。 .breadcrumb 和 .breadcrumb-item 类指示当前页面在导航层次结构中的位置: <div class="container"> <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">照片</a></li> <li class="breadcrumb-item"><a href="#">2020年春季</a></li> <li class="breadcrumb-item"><a href="#">北京</a></li> <li class="breadcrumb-item">上海</li> </ul> </div> 复制尝试一下 相关页面 CSS 对齐 CSS 分页 PHP MySQL数据分页