Bootstrap 4 如何对齐分页

Bootstrap 4是一个很受欢迎的前端编程框架，用于创建响应式、移动优先的网站。它提供了各种CSS和JavaScript元素，如导航条、表单、按钮、模版等，可用于快速建立具有现代、光洁外观的网站。

Bootstrap 4中的分页对齐指的是网页分页组件的定位方式。分页通常是居中的，但justify-content-*类允许左或右对齐。

方法

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

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

现在让我们通过实例来详细了解每种方法。

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

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

例子

在这里，我们将通过一个逐步的例子来实现这种方法 −

第1步 - 确保Bootstrap 4的JavaScript和CSS文件被包含在HTML文档的头部。

第2步 - 为了构建一个分页组件，创建一个带有分页类的<ul>元素。对于每个页面，在<ul>元素内添加一个带有类分页链接的<a>元素和一个带有类分页项目的<li>元素。

第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步 --在容器div内创建一个<ul>元素，并给它分页和对齐分页链接到所需侧的类别（如text-center、text-left、textright）。

<ul class="pagination text-center">

第3步 - 为每个页码或<ul>元素内的上一个和下一个按钮创建<li>元素。给每个li元素赋予 “页面-项目 “类。

<li class="page-item">

第4步 - 在每个<li>元素中为按钮或页码创建一个<a>元素。给<a>元素赋予 “页面-链接 “的类别。

<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属性的导航元素，并给持有分页链接的无序列表元素赋予textcenter类，就可以做到这点。有了这个策略，改变分页的颜色和方向就很简单了，不需要创建大量的独特CSS。