首頁 >web前端 >css教學 >如何在 Bootstrap 4 中對齊分頁？

如何在 Bootstrap 4 中對齊分頁？

王林轉載: 2023-09-16 10:05:021363瀏覽

如何在 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 - 若要建立分頁元件，請使用 pagination 類別建立 ff6d136ddc5fdfeffaf53ff6ee95f185 元素。對於每個頁面，在 ff6d136ddc5fdfeffaf53ff6ee95f185 元素內新增一個帶有類別頁面連結的 3499910bf9dac5ae3c52d5ede7383485 元素和一個帶有類別頁面項目的 25edfb22a4f469ecb59f1190150159c6 元素。

步驟 3 - 您必須將下列其中一個類別新增至 ff6d136ddc5fdfeffaf53ff6ee95f185 元素，以便將分頁元件左對齊、置中或右對齊 -

分頁元件使用 .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 中建立一個ff6d136ddc5fdfeffaf53ff6ee95f185 元素，並為其指定類別pagination 和align-pagination-links-to-desired-side（例如text-center、text- left、textright））

<ul class="pagination text-center">

步驟 3 - 為 ff6d136ddc5fdfeffaf53ff6ee95f185 元素內的每個頁碼或上一個和下一個按鈕建立 25edfb22a4f469ecb59f1190150159c6 元素。為每個 li 元素指定「page-item」類別。

<li class="page-item">

步驟 4 - 為每個 25edfb22a4f469ecb59f1190150159c6 元素內的按鈕或頁碼建立 3499910bf9dac5ae3c52d5ede7383485 元素。將類別“page-link”賦予 3499910bf9dac5ae3c52d5ede7383485 元素。

<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中文網其他相關文章！

JavaScript css bootstrap html ul li

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS淡出動畫效果下一篇：CSS淡出動畫效果

看更多