4.14、Bootstrap V4自学之路-----组件---分页-CSDN博客

本文介绍了如何使用HTML和CSS实现不同样式的分页导航，包括默认分页样式、禁用和激活状态的效果、不同尺寸的分页样式以及简单分页等。通过具体的代码示例，展示了如何设置分页链接的样式及状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认分页

简单的分页灵感来自Rdio，对应用和搜索结果来说特别棒。大的块很难漏掉、容易缩放，提供大的点击区域。

.pagination类，英文是翻页。 .Previous类，英文是上、前面。

<nav>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

禁用的和激活的状态

为不同的需要，可以自定义链接。使用.disabled以禁止点击链接，使用.active以指示当前页。

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">1 <span class="sr-only">(current)</span></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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

PS：这例子就比较有实际意义。

1、与之前不同的是，上一页的<li>加上了 .disabled类。不可选中。

2、数字1的<li>加上了 .active类。表示活动。

3、这是让我觉得最赞的地方，是<li class=active>里面的<span class="sr-only">(当前)</span>。

我觉着有些看不到的地方做的到位，比堂而皇之的绚丽页面来的让人欣喜。

PS：上面代码第三行。<a href="#" aria-label="Previous"> 可以换成<span>一样生效<span aria-label="Previous">。

尺寸

想要更大或更小的分页吗？添加.pagination-lg或.pagination-sm取得额外的尺寸。

<nav>
  <ul class="pagination pagination-lg">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

<nav>
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

<nav>
  <ul class="pagination pagination-sm">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

简单分页

创建快速的上一页/下一页链接，使用亮的标记和样式。它对博客之类的简单站点或杂志来说很棒。

默认示例

默认地，简单分页链接居中。.pager类，英文：分页。

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

对齐链接

或者，你可以将链接设置为向两侧对齐：

<nav>
  <ul class="pager">
    <li class="pager-prev"><a href="#">prev</a></li>
    <li class="pager-next"><a href="#">next</a></li>
  </ul>
</nav>

PS：这里我想说，卢松松的个人博客。他的翻页就是这样的。左右左右的大块的点击。

可选的禁用状态

简单分页同样可以使用.disabled类。

<nav>
  <ul class="pager">
    <li class="pager-prev disabled"><a href="#">prev</a></li>
    <li class="pager-next"><a href="#">next</a></li>
  </ul>
</nav>

PS：现在学习的样式比较多，有些是没有拼接效果，只能看到一个样子。也许到时候还是需要使用一些JS、JQ去做具体控制吧?

转载于:https://my.oschina.net/asktao/blog/646985