Bootstrap 4 是一個廣受歡迎的用於創建響應式、行動優先網站的前端程式框架。它提供了各種 CSS 和 JavaScript 元素，例如導覽列、表單、按鈕、模式等，這些元素可能是用於快速建立具有現代、精美外觀的網站。
Bootstrap 4 中的分頁對齊是指網頁分頁元件的定位方式。分頁通常是居中的，但是。 justify-content-* 類別允許左對齊或右對齊。
Bootstrap 4 中有多種可能的分頁對齊方法 -
使用 .justify-content-* 類別
#使用 text-* 類別
現在讓我們透過範例詳細了解每種方法。
Bootstrap 4 中分頁對齊的第一種方法是「使用 .justify-content-* 類別」。
在這裡，我們將透過一個逐步範例來實現此方法 -
第 1 步 - 確保 Bootstrap 4 的 JavaScript 和 CSS 檔案包含在 HTML 文件的頭部中。
步驟 2 - 若要建立分頁元件，請使用 pagination 類別建立
步驟 3 - 您必須將下列其中一個類別新增至
分頁元件使用 .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>
要將分頁元件分別向左、居中或向右對齊，請使用。文字左、文字中心和。文字右類。
我們現在將看一下實作此方法的逐步範例 -
第 1 步 - 建立一個容器 div 元素並為其指定類別 justify-content-center。結果，分頁將在容器內居中。
<div class="justify-content-center">
步驟2 - 在容器div 中建立一個
<ul class="pagination text-center">
步驟 3 - 為
<li class="page-item">
步驟 4 - 為每個
<a class="page-link" href="#">1</a>
第 5 步 - 最終程式碼如下所示 -
<div class="justify-content-center">
<ul class="pagination text-center">
<li class="page-item">
Previous
<li class="page-item">
<a class="page-link" href="#">1</a>
<li class="page-item">
2
<li class="page-item">
3
<li class="page-item">
Next
利用框架提供的內建類別將使 Bootstrap 4 中的分頁對齊變得簡單。透過使用上述逐步流程，您可以製作一個功能齊全且視覺上以頁面為中心的分頁元件。在專案中包含 Bootstrap CSS 和 JavaScript 文件，建立具有 aria-label 屬性的 nav 元素，並提供包含分頁連結的無序列表元素。 textcenter 類別將執行此操作。透過這種策略，可以輕鬆更改分頁的顏色和方向，而無需創建大量獨特的 CSS。
以上是如何在 Bootstrap 4 中對齊分頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
