亚洲欧美中文日韩二区,国产又爽又黄免费软件,欧美日本亚洲一区二区三区

Bootstrap 4 是一個(gè)廣受歡迎的用于創(chuàng)建響應(yīng)式、移動(dòng)優(yōu)先網(wǎng)站的前端編程框架。它提供了各種 CSS 和 JavaScript 元素，例如導(dǎo)航欄、表單、按鈕、模式等，這些元素可能是用于快速構(gòu)建具有現(xiàn)代、精美外觀的網(wǎng)站。

Bootstrap 4 中的分頁對(duì)齊是指網(wǎng)頁分頁組件的定位方式。分頁通常是居中的，但是。 justify-content-* 類允許左對(duì)齊或右對(duì)齊。

方法

Bootstrap 4 中有多種可能的分頁對(duì)齊方法 –

使用 .justify-content-* 類

使用 text-* 類

現(xiàn)在讓我們通過示例詳細(xì)了解每種方法。

方法 1：使用“.justify-content-* 類”

Bootstrap 4 中分頁對(duì)齊的第一種方法是“使用 .justify-content-* 類”。

示例

在這里，我們將通過一個(gè)分步示例來實(shí)現(xiàn)此方法 –

第 1 步 – 確保 Bootstrap 4 的 JavaScript 和 CSS 文件包含在 HTML 文檔的頭部中。

步驟 2 – 要構(gòu)建分頁組件，請(qǐng)使用 pagination 類創(chuàng)建元素。對(duì)于每個(gè)頁面，在元素內(nèi)添加一個(gè)帶有類頁面鏈接的元素和一個(gè)帶有類頁面項(xiàng)的元素。

步驟 3 – 您必須將以下類之一添加到元素，以便將分頁組件左對(duì)齊、居中或右對(duì)齊 –

分頁組件使用 .justify-content-start 樣式左對(duì)齊。

使用 justify-content-center 樣式時(shí)分頁組件居中。

align-pagination-end：將分頁元素向右移動(dòng)

第 4 步 – 這是分頁左對(duì)齊時(shí) 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>

登錄后復(fù)制

第 5 步 – 添加所需的類后，分頁組件應(yīng)該按照您的預(yù)期對(duì)齊。

第 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>

登錄后復(fù)制

方法 2：使用 text-* 類

要將分頁組件分別向左、居中或向右對(duì)齊，請(qǐng)使用。文本左、文本中心和。文本右類。

示例

我們現(xiàn)在將看一下實(shí)施此方法的分步示例 –

第 1 步 – 創(chuàng)建一個(gè)容器 div 元素并為其指定類 justify-content-center。結(jié)果，分頁將在容器內(nèi)居中。

<div class="justify-content-center">

登錄后復(fù)制

步驟 2 – 在容器 div 中創(chuàng)建一個(gè) <ul> 元素，并為其指定類 pagination 和align-pagination-links-to-desired-side（例如 text-center、text-left、textright））

<ul class="pagination text-center">

登錄后復(fù)制

步驟 3 – 為 <ul> 元素內(nèi)的每個(gè)頁碼或上一個(gè)和下一個(gè)按鈕創(chuàng)建 <li> 元素。為每個(gè) li 元素指定“page-item”類。

<li class="page-item">

登錄后復(fù)制

步驟 4 – 為每個(gè) <li> 元素內(nèi)的按鈕或頁碼創(chuàng)建 <a> 元素。將類“page-link”賦予 <a> 元素。

<a class="page-link" href="#">1</a>

登錄后復(fù)制

第 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>

登錄后復(fù)制

結(jié)論

利用框架提供的內(nèi)置類將使 Bootstrap 4 中的分頁對(duì)齊變得簡(jiǎn)單。通過使用上述分步過程，您可以制作一個(gè)功能齊全且視覺上以??頁面為中心的分頁組件。在項(xiàng)目中包含 Bootstrap CSS 和 JavaScript 文件，建立具有 aria-label 屬性的 nav 元素，并提供包含分頁鏈接的無序列表元素。 textcenter 類將執(zhí)行此操作。通過這種策略，可以輕松更改分頁的顏色和方向，而無需創(chuàng)建大量獨(dú)特的 CSS。

以上就是如何在 Bootstrap 4 中對(duì)齊分頁？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！