上一节:
下一节:

  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>
    尝试一下

  • 相关页面

上一节:
下一节: