bootstrap-分页导航（翻页分页导航）

Bootstrap是一个知名的前端框架，它提供了丰富的组件、工具和样式，可以帮助我们快速地构建美观且功能强大的Web界面。在Web应用中，我们常常需要使用分页导航来展示数据。Bootstrap提供了一系列的分页导航组件，包括基础分页导航、缩略图分页导航、按钮分页导航和响应式分页导航。

1. 基础分页导航

基础分页导航是最简单的分页导航组件，它由分页链接、上一页和下一页按钮组成。我们可以使用ul元素和li元素来创建分页链接，并且可以使用disabled类来禁用上一页和下一页按钮。

<nav>
  <ul class="pagination"> <!-- pagination类是Bootstrap提供的样式 -->
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">上一页</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>
</nav>

在上面的示例中，我们使用了pagination类来设置分页导航的样式。page-item类用于设置每个分页链接的样式，page-link类用于设置分页链接的颜色和样式。disabled类用于禁用上一页和下一页按钮。

2. 缩略图分页导航

缩略图分页导航是一种比较特殊的分页导航组件，它可以展示每一页的缩略图。我们可以使用row和col-*-*类来创建缩略图，使用pagination类和page-item类来设置分页导航的样式。

<nav>
  <ul class="pagination pagination-sm"> <!-- pagination-sm类设置分页导航的大小 -->
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">上一页</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <img src="img/page1.jpg" alt="Page 1" class="img-thumbnail">
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <img src="img/page2.jpg" alt="Page 2" class="img-thumbnail">
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <img src="img/page3.jpg" alt="Page 3" class="img-thumbnail">
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">下一页</a>
    </li>
  </ul>
</nav>

在上面的示例中，我们使用了img-thumbnail类来设置每个缩略图的样式。

3. 按钮分页导航

按钮分页导航是一种使用按钮代替分页链接的分页导航组件。我们可以使用pagination类和page-item类来设置分页导航的样式，但是需要使用btn类和btn-*类来设置每个按钮的样式。

<nav>
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">上一页</a>
    </li>
    <li class="page-item">
      <button class="btn btn-secondary">1</button>
    </li>
    <li class="page-item">
      <button class="btn btn-secondary">2</button>
    </li>
    <li class="page-item">
      <button class="btn btn-secondary">3</button>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">下一页</a>
    </li>
  </ul>
</nav>

在上面的示例中，我们使用了justify-content-center类来将分页导航居中显示。btn-secondary类用于设置每个按钮的样式。

4. 响应式分页导航

响应式分页导航是一种可以在移动设备上自动转换为下拉菜单的分页导航组件。它由一个下拉菜单和若干分页链接组成。我们可以使用pagination类和page-item类来设置分页导航的样式，使用dropdown类和dropdown-menu类来创建下拉菜单。

<nav>
  <ul class="pagination pagination-sm justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">上一页</a>
    </li>
    <li class="page-item dropdown">
      <a class="page-link dropdown-toggle" href="#" id="paginationDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        1
      </a>
      <div class="dropdown-menu" aria-labelledby="paginationDropdown">
        <a class="dropdown-item" href="#">1</a>
        <a class="dropdown-item" href="#">2</a>
        <a class="dropdown-item" href="#">3</a>
      </div>
    </li>
    <li class="page-item dropdown">
      <a class="page-link dropdown-toggle" href="#" id="paginationDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        2
      </a>
      <div class="dropdown-menu" aria-labelledby="paginationDropdown">
        <a class="dropdown-item" href="#">1</a>
        <a class="dropdown-item" href="#">2</a>
        <a class="dropdown-item" href="#">3</a>
      </div>
    </li>
    <li class="page-item dropdown">
      <a class="page-link dropdown-toggle" href="#" id="paginationDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        3
      </a>
      <div class="dropdown-menu" aria-labelledby="paginationDropdown">
        <a class="dropdown-item" href="#">1</a>
        <a class="dropdown-item" href="#">2</a>
        <a class="dropdown-item" href="#">3</a>
      </div>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">下一页</a>
    </li>
  </ul>
</nav>

在上面的示例中，我们使用了justify-content-center类将分页导航居中，使用dropdown类和dropdown-toggle类创建下拉菜单。dropdown-menu类用于设置下拉菜单的样式。注意，每个下拉菜单需要有 的id属性。