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>