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 – 要構建分頁組件，請使用 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" >
<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-* 類
要將分頁組件分別向左、居中或向右對齊，請使用。文本左、文本中心和。文本右類。
示例
我們現在將看一下實施此方法的分步示例 –
第 1 步 – 創建一個容器 div 元素并為其指定類 justify-content-center。結果，分頁將在容器內居中。
<div class="justify-content-center">
登錄后復制
步驟 2 – 在容器 div 中創建一個 <ul> 元素，并為其指定類 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> 元素。將類“page-link”賦予 <a> 元素。
<a class="page-link" href="#">1</a>
登錄后復制
第 5 步 – 最終代碼如下所示 –
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" >
<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。
以上就是如何在 Bootstrap 4 中對齊分頁？的詳細內容，更多請關注www.92cms.cn其它相關文章！
