如何在 Bootstrap 4 中对齐分页?

bootstrapcssweb developmentfront end technology更新于 2025/1/7 21:32:17

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 文档的 head 中。

步骤 2 - 要构建分页组件，请创建一个带有 pagination 类的 <ul> 元素。对于每个页面，在 <ul> 元素内添加一个带有 page link 类的 <a> 元素和一个带有 page item 类的 <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 - 创建一个 <ul>在容器 div 中创建一个元素，并为其添加 pagination 和 align-pagination-links-to-desired-side 类名(例如 text-center、text-left、textright)

<ul class="pagination text-center">

步骤 3 − 在 <ul> 元素内为每个页码或上一个和下一个按钮创建 <li> 元素。为每个 li 元素添加 "page-item" 类名。

<li class="page-item">

步骤 4 − 在每个 <li> 元素内为按钮或页码创建一个 <a> 元素。为每个 <a> 元素添加 "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。