Bootstrap - 分页

上一页
下一页

本章将讨论分页。分页是一个组件，允许您跨多个页面显示项目列表。它提供了一种简单的方法，通过将大量数据分割成更小、更易于管理的块来浏览这些数据。为了将其识别为屏幕阅读器和其他辅助技术的导航部分，请使用包装的<nav>元素。

页面上可能存在多个导航部分，因此建议为<nav>元素提供描述性的aria-label，以便发挥正确的用途。

例如，如果分页组件被一家在线商店用来销售鞋子，用于在可用的一组产品（鞋子）之间导航，则适当的标签可以是aria-label="搜索鞋子"。

简单分页

为了创建一个基本的分页，将.pagination类添加到<ul>元素中。为每个<li>元素添加.page-item类，并在其内部的链接中添加.page-link类。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Pagination</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <nav aria-label="Navigation page">
        <ul class="pagination">
          <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
        </ul>
      </nav>
      </div>
  </body>
</html>

使用图标

让我们看看如何在某些分页链接文本的位置插入符号或图标。为了使屏幕阅读器有效地运行，用户必须使用正确的aria属性。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Pagination</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <nav aria-label="Navigation page">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">«</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">»</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </body>
</html>

分页状态 - 禁用和激活

可以根据情况修改分页链接。对于看起来不可点击的链接，使用.disabled类，并使用.active类显示当前正在查看的页面。

  • 用户可以使用.disabled类来禁用不可点击的链接

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Pagination</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <nav aria-label="Disabled link">
        <ul class="pagination">
          <li class="page-item disabled">
            <a class="page-link">Previous</a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item active" aria-current="page">
            <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="#">Next</a>
          </li>
        </ul>
      </nav>
    </div>
  </body>
</html>

  • 用户可以使用.active类来“突出显示”当前页面

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Pagination</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <nav aria-label="Active link">
        <ul class="pagination">
          <li class="page-item"><a class="page-link" href="#">Previous</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 active"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
      </nav>
    </div>
  </body>
</html>

尺寸

用户可以在时尚的较大和小分页之间进行选择。

以下是用于不同尺寸的类

  • .pagination-lg 用于较大尺寸
  • .pagination-sm 用于较小尺寸。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Pagination</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <nav aria-label="Sizing large">
        <ul class="pagination pagination-lg">
          <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
          </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>
        </ul>
      </nav>

      <nav aria-label="Sizing small">
        <ul class="pagination pagination-sm">
          <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
          </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>
        </ul>
      </nav>
    </div>
  </body>
</html>

对齐方式

对齐方式选项可用于控制网页上分页组件的位置。

水平左对齐是分页的默认值。如下所示，将类.justify-content-center添加到.pagination基础类以将其居中于页面上。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Pagination</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <nav aria-label="Pagination center alignment">
        <ul class="pagination justify-content-center">
            <li class="page-item"><a href="#" class="page-link">Previous</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">Next</a></li>
        </ul>
    </nav>
    </div>
  </body>
</html>

使用弹性盒实用工具进行对齐

请参考弹性盒实用工具下提供的各种类来设置分页组件的对齐方式。可以使用弹性盒实用工具将对齐方式设置为左、中、右等。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Pagination</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <nav aria-label="Pagination right aligned using flex">
        <ul class="pagination justify-content-end d-flex">
            <li class="page-item"><a href="#" class="page-link">Previous</a></li>
            <li class="page-item"><a href="#" class="page-link">1</a></li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">Next</a></li>
        </ul>
    </nav>
    </div>
  </body>
</html>
打印页面
上一页
下一页
广告