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>
-