在本教程中，我们将学习Bootstrap中的分页。

我们使用分页来明智地浏览页面。

默认分页

受Rdio启发的简单分页，非常适合应用程序和搜索结果。
大块很难错过，易于扩展，并提供较大的点击区域。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

活跃状态

我们使用.active类来表示活动状态。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

禁用状态

我们使用.disabled类来禁用分页链接。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

大小

我们可以添加以下类.pagination-lg和.pagination-sm来更改分页按钮的大小

<!-- large size -->
<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

<!-- default size -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

<!-- small size -->
<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

分页部件

我们使用它来创建上一个和下一个按钮分页。

<nav aria-label="Page navigation">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

分页对齐

我们可以将寻呼机的上一个和下一个按钮对齐。

<nav aria-label="Page navigation">
  <ul class="pager">
    <li class="previous">
      <a href="#"><span aria-hidden="true">&larr;</span> Prev</a>
    </li>
    <li class="next">
      <a href="#">Next <span aria-hidden="true">&rarr;</span></a>
    </li>
  </ul>
</nav>

要禁用寻呼机按钮，我们可以简单地添加.disabled类。

<nav aria-label="Page navigation">
  <ul class="pager">
    <li class="previous disabled">
      <a href="#"><span aria-hidden="true">&larr;</span> Prev</a>
    </li>
    <li class="next">
      <a href="#">Next <span aria-hidden="true">&rarr;</span></a>
    </li>
  </ul>
</nav>