如何在 Bootstrap 4 中建立分頁?


為了在我們的 web 應用中實現分頁,我們使用 Bootstrap 4 提供的不同類,例如“pagination”、“page-item”、“active”、“disabled”等等。分頁意味著為一系列頁面中的特定頁面指定一個頁碼。這可以應用於具有大量頁面的 web 應用、書籍或任何其他具有系列資料的實體,而我們只想一次顯示其中一部分資料。

讓我們更詳細地討論這些類以及如何在下面的示例中使用它們來建立分頁佈局:

示例 1

在這個示例中,我們將建立一個簡單的分頁佈局,其中我們將“pagination”類新增到“ul”HTML 元素,併為其子“li”元素賦予“page-item”和“page-link”類。

<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <h3>How to create pagination in Bootstrap 4?</h3>
   <ul class="pagination">
      <li class="page-item page-link">1</li>
      <li class="page-item page-link">2</li>
      <li class="page-item page-link">3</li>
   </ul>
</body>
</html>

示例 2

在這個示例中,除了新增分頁外,我們還將向分頁專案新增“active”類和“disabled”類。

<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <h3>How to create pagination in Bootstrap 4?</h3>
   <ul class="pagination">
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item disabled"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</body>
</html>

示例 3

在這個示例中,讓我們使用 Bootstrap 4 提供的“pagination-lg”類來增加分頁的大小。

<html lang="en">
<head>
   <title>How to create pagination in Bootstrap 4?</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <h3>How to create pagination in Bootstrap 4?</h3>
   <ul class="pagination pagination-lg">
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item disabled"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
   </ul>
</body>
</html>

結論

在本文中,我們學習瞭如何在 web 應用中使用 Bootstrap 4 建立分頁佈局,並藉助三個示例進行了說明。在第一個示例中,我們使用了“page-item”和“page-link”類;在第二個示例中,我們使用了“active”和“disabled”類來表示活動和停用的專案;在第三個示例中,我們使用了“pagination-lg”類來增加分頁的大小。

更新於:2023年2月22日

311 次瀏覽

開啟您的職業生涯

透過完成課程獲得認證

開始學習
廣告