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" 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-* 類別
要將分頁元件分別向左、居中或向右對齊，請使用。文字左、文字中心和。文字右類。
範例
我們現在將看一下實作此方法的逐步範例 -
第 1 步 - 建立一個容器 div 元素並為其指定類別 justify-content-center。結果，分頁將在容器內居中。
<div class="justify-content-center">
步驟2 - 在容器div 中建立一個
- 元素，並為其指定類別pagination 和align-pagination-links-to-desired-side（例如text-center、text- left、textright） ）
<ul class="pagination text-center">
步驟 3 - 為
- 元素內的每個頁碼或上一個和下一個按鈕建立
- 元素。為每個 li 元素指定「page-item」類別。
<li class="page-item">
步驟 4 - 為每個
- 元素內的按鈕或頁碼建立 元素。將類別“page-link”賦予 元素。
<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中文網其他相關文章！
兩個圖像和一個API：我們重新著色產品所需的一切Apr 15, 2025 am 11:27 AM我最近找到了一種動態更新任何產品圖像的顏色的解決方案。因此，只有一種產品之一，我們可以以不同的方式對其進行著色以顯示
每周平台新聞：第三方代碼，被動混合內容，連接最慢的國家的影響Apr 15, 2025 am 11:19 AM在本週的綜述中，燈塔在第三方腳本上闡明了燈光，不安全的資源將在安全站點上被阻止，許多國家連接速度
託管您自己的非JavaScript分析的選項Apr 15, 2025 am 11:09 AM有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics（廣泛使用）
它全部都在頭上：管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM該文檔負責人可能不是網站上最迷人的部分，但是其中所處的內容對於您的網站的成功也一樣重要
JavaScript中的Super（）是什麼？Apr 15, 2025 am 10:59 AM當您看到一些稱為super（）的JavaScript時，在子類中，您會使用super（）調用其父母的構造函數和超級。訪問它
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
禪工作室 13.0.1
強大的PHP整合開發環境
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
