Pagination trong bootstrap 5

Công nghệ Lập trình Bootstrap 5

12/12
Thạch
Bootstrap 5
0
240

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.

Bài 14: Spinner trong Bootstrap 5

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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>

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Phân trang Sinitc.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>

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.com</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 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Căn lề phân trang trên Sinitc.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>

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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>

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.