如何在Bootstrap 4中对齐分页

Bootstrap 4是一个受欢迎的前端编程框架，用于创建响应式、以移动设备为优先的网站。它提供了许多CSS和JavaScript元素，如导航栏、表单、按钮、模态框等，可以快速构建具有现代化、精致外观的网站。

Bootstrap 4中的分页对齐是指网页的分页组件的位置。分页通常居中显示，但是.justify-content-*类可以实现左对齐或右对齐。

方法

在Bootstrap 4中，对齐分页的方法有多种：

使用.justify-content-*类
使用text-*类

现在让我们详细看一下每种方法的示例。

方法1：使用`.justify-content-*`类

Bootstrap 4中对齐分页的第一种方法是“使用.justify-content-*类”。

示例

下面，我们将逐步介绍一个示例来实现这种方法：

步骤1 - 确保在HTML文档的头部引入了Bootstrap 4的JavaScript和CSS文件。

步骤2 - 要构建一个分页组件，创建一个带有class为pagination的<ul>元素。对于每个页面，将一个class为page link的<a>元素和一个class为page item的<li>元素添加到<ul>元素中。

步骤3 - 为了将分页组件对齐到左侧、居中或右侧，必须向<ul>元素添加以下类之一：

使用.justify-content-start样式可以使分页组件左对齐。
使用justify-content-center样式可以使分页组件居中对齐。
使用.align-pagination-end样式将分页元素移到右侧。

步骤4 - 下面是一个示例，展示了如果将分页对齐到左侧，HTML代码将如何显示：

<ul class="pagination justify-content-start">
   <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="#">Next</a>
   </li>
</ul>

步骤 5 − 添加所需的类后，分页组件应按照您的意图进行对齐。

步骤 6 − 最终代码如下所示 −

<!DOCTYPE html>
<html>
<head>
   <link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
      <div class="row justify-content-center">
         <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
               <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                     <span aria-hidden="true">«</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">»</span>
                     <span class="sr-only">Next</span>
                  </a>
               </li>
            </ul>
         </nav>
      </div>
   </div>
</body>
</html>

方法2：使用text-*类

要将分页组件对齐到左侧、居中或右侧，请分别使用text-left、text-center和text-right类。

示例

我们现在将逐步介绍实现该方法的示例：

步骤1 - 创建一个容器div元素并将其赋予justify-content-center类。结果是，分页将在容器内居中显示。

<div class="justify-content-center">

步骤2 - 在容器

中创建一个<ul>元素，并给它添加类pagination和align-pagination-links-to-desired-side（例如text-center、text-left、text-right）

<ul class="pagination text-center">

步骤3 − 在<ul>元素中为每个页面编号或前进和后退按钮创建<li>元素。给每个li元素添加类名”page-item”。

<li class="page-item">

步骤4 - 在每个<li>元素中为按钮或页面数字创建<a>元素。给<a>元素加上”class”为”page-link”。

<a class="page-link" href="#">1</a>

步骤5 - 最终的代码如下所示 –

<!DOCTYPE html>
<html>
<head>
   <link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="justify-content-center">
      <ul class="pagination text-center">
         <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>
   </div>
</body>
</html>

结论

使用框架提供的内置类，将使得在Bootstrap 4中对齐分页变得简单明了。通过上述逐步过程，您可以创建一个完全功能且在页面上居中显示的分页组件。在项目中包含Bootstrap的CSS和JavaScript文件，创建一个带有aria-label属性的nav元素，并给包含分页链接的无序列表元素添加textcenter类即可实现此目的。通过这种策略，可以简单地更改分页的颜色和方向，而无需创建大量独有的CSS。