Bài 15: Pagination trong Bootstrap 5

Chí Vỹ

Phần bài học Bootstrap cơ bản này sẽ thảo luận về tính năng phân trang hay Pagination. Bootstrap 5 xử lý danh sách không theo đúng thứ tự giống như rất nhiều các nhân tố khác trên giao diện.

Phân trang trong Boostrap 5

Bảng sau sẽ liệt kê các class mà Bootstrap cung cấp để phân trang:

.pagination

Mô tả: Thêm class này để phân trang cho web

Code mẫu:

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

.disabled, .active

Mô tả: Tùy biến các link bằng .disalbed cho link không thể click và .active cho trang hiện tại.

<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>

.pagination-lg, .pagination-sm

Mô tả: Dùng những class này cho các mục có kích thước khác nhau.

Code mẫu:

<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Phân trang cơ bản

Nếu có một trang web với nhiều trang khác nhau, bạn có thể muốn thêm một chút kiểu phân trang cho cho từng trang.

Để tạo phân trang cơ bản, thêm class .pagination vào một nhân tố <ul>. Sau đó, thêm .page-item vào từng thẻ <li> và một class .page-link vào từng link bên trong <li>:

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Phân trang</h2>
  <p>Để tạo phân trang cơ bản, thêm class .pagination vào một nhân tố ul. Sau đó, thêm .page-item vào từng thẻ li và một class .page-link vào từng link bên trong li:</p>                  
  <ul class="pagination">
    <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>

Phân trang cơ bản trong Bootstrap

Trạng thái hoạt động

Class .active được dùng để highlight trang hiện tại:

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Phân trang - Trạng thái hoạt động</h2>
  <p>Thêm class .active để người dùng biết họ đang ở trên trang nào của Quantrimang.com:</p>
  <ul class="pagination">
    <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 active"><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>

Phân trang đang hoạt động

Trạng thái vô hiệu hóa

Class .disable được dùng cho các trang không thể click. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Phân trang Quantrimang.com - Trạng thái không hoạt động</h2>
  <p>Thêm class .disabled cho trang bị vô hiệu hóa:</p>
  <ul class="pagination">
    <li class="page-item disabled"><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>

Trang không hoạt động

Kích thước phân trang

Các khối phân trang trong Bootstrap 5 cũng có thể chỉnh kích thước lớn hoặc nhỏ hơn. Thêm .pagination-lg cho khối lớn hơn hoặc .pagination-sm cho khối nhỏ hơn. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Kích thước khối phân trang trên Quantrimang</h2>
  <p>Thêm .pagination-lg cho khối lớn hơn hoặc .pagination-sm cho khối nhỏ hơn.</p>

  <p>Large:</p>
  <ul class="pagination pagination-lg">
    <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>

  <p>Default:</p>
  <ul class="pagination">
    <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>

  <p>Small:</p>
  <ul class="pagination pagination-sm">
    <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>

Chỉnh khối phân trang trên Bootstrap

Chỉnh lề phân trang

Dùng các class tiện ích để thay đổi lề phân trang trong Bootstrap 5. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Căn lề phân trang trên Quantrimang.com</h2>
  <p>Dùng các class tiện ích để thay đổi lề phân trang:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
</div>

</body>
</html>

Chỉnh lề phân trang trên Bootstrap 5

Breadcrumb

Breadcrumb là một hình thức phân trang đặc biệt, tập hợp các liên kết giúp người dùng xác định vị trí tương đối trong cấu trúc trang. Class .breadcrumb và .breadcrumb-item chỉ vị trí trang hiện tại trong hệ thống phân cấp điều hướng. Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Breadcrumbs</h2>
  <p>Class .breadcrumb và .breadcrumb-item chỉ vị trí trang hiện tại trong hệ thống phân cấp điều hướng trên trang Quantrimang.com:</p>                  
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Photos</a></li>
    <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
    <li class="breadcrumb-item"><a href="#">Italy</a></li>
    <li class="breadcrumb-item active">Rome</li>
  </ul>
</div>

</body>
</html>

Phân trang đặc biệt trong Bootstrap 5

Trên đây là tất cả những điều bạn cần biết về các cách phân trang trong Bootstrap 5. Bạn có thể áp dụng nhiều kiểu phân trang kể trên cho trang web theo nhu cầu và mục đích phát triển đang hướng tới.

Thứ Năm, 01/12/2022 16:54

5 ★ 1 👨 831

#Bootstrap