首页 Bootstrap5组件手册

分页栏


HTML格式:
<ul>      <!--分页框-->
  <li>      <!--按钮框-->
    <a href="#"></a>  <!--按钮链接-->
  </li>
</ul>


===========================================
<ul>
基础类:
.pagination

组合类:(单选)
.pagination-lg            大号分页
.pagination-sm            小号分页

组合类:
.justify-content-center   居中
.justify-content-end      右对齐

===========================================
<li>
基础类:
.page-item                分页按钮样式(带点圆角,取消直角)

组合类:
.active                   选中,高亮
.disabled                 禁止,不可点击

===========================================
<a>
基础类:
.page-link                链接样式

示例


<ul class="pagination">
<li class="page-item"> <a class="page-link" href="#">首页</a> </li>
<li class="page-item"> <a class="page-link" href="#">上一页</a> </li>
<li class="page-item active"> <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>
<li class="page-item"> <a class="page-link" href="#">尾页</a> </li>
</ul>