Bootstrap - Phân trang: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang theo đuổi lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới của Bootstrap phân trang. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất vui được hướng dẫn bạn trong hành trình này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ trở thành chuyên gia phân trang!

什么是分页？

Trước khi chúng ta nhảy vào Bootstrap, hãy hiểu phân trang là gì. Hãy tưởng tượng bạn đang đọc một cuốn sách dài. Thay vì nhồi nhét tất cả nội dung vào một trang, nó được chia thành các phần quản lý được - đó là phân trang trong thế giới kỹ thuật số. Nó giúp tổ chức một lượng lớn nội dung trên nhiều trang, giúp người dùng dễ dàng hơn trong việc duyệt网页.

Bootstrap Pagination: Cơ bản

Bootstrap, bộ công cụ front-end đáng tin cậy của chúng ta, cung cấp một cách đơn giản và thời trang để tạo phân trang. Hãy bắt đầu từ những nguyên tắc cơ bản.

Phân trang Đơn giản

Để tạo một phân trang cơ bản trong Bootstrap, chúng ta sử dụng các thẻ <nav> và <ul> với các lớp cụ thể. Dưới đây là một ví dụ đơn giản:

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Trước</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="#">Tiếp theo</a></li>
</ul>
</nav>

Hãy phân tích này:

• Thẻ <nav> bao quanh phân trang của chúng ta để mục đích ngữ nghĩa.
• Thẻ <ul> có lớp pagination, áp dụng các phong cách phân trang của Bootstrap.
• Mỗi <li> đại diện cho một trang và có lớp page-item.
• Các thẻ <a> bên trong mỗi <li> có lớp page-link, phong cách hóa phần có thể nhấp.

Làm việc với Biểu tượng

Muốn làm cho phân trang của bạn trông đẹp hơn? Hãy thêm một số biểu tượng! Bootstrap hoạt động rất tốt với các thư viện biểu tượng như Font Awesome. Dưới đây là cách bạn có thể sử dụng biểu tượng trong phân trang của mình:

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</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">&raquo;</span>
</a>
</li>
</ul>
</nav>

Trong ví dụ này, chúng ta đã sử dụng « và » để tạo các biểu tượng mũi tên trái và phải. Đây là các thực thể HTML render thành « và » tương ứng.

Trạng thái Phân trang: Vô hiệu hóa và Hoạt động

Đôi khi, bạn muốn nổi bật trang hiện tại hoặc vô hiệu hóa một số tùy chọn导航. Bootstrap làm điều này rất dễ dàng với các lớp active và disabled.

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Trước</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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="#">Tiếp theo</a>
</li>
</ul>
</nav>

Ở đây, liên kết "Trước" bị vô hiệu hóa (bạn không thể nhấp vào nó), và trang 2 được đánh dấu là hoạt động (đang được chọn).

Kích thước

Giống như Goldilocks, đôi khi bạn cần phân trang có kích thước phù hợp. Bootstrap cung cấp các tùy chọn kích thước khác nhau:

<!-- Phân trang Lớn -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

<!-- Phân trang Nhỏ -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

Thêm pagination-lg để tạo phân trang lớn hơn hoặc pagination-sm để tạo phân trang nhỏ hơn. Nó giống như việc chọn giữa grande hoặc tall tại quán cà phê yêu thích của bạn!

Căn chỉnh

Mặc định, phân trang căn chỉnh bên trái. Nhưng nếu bạn muốn căn giữa hoặc đẩy nó sang phải? Bootstrap cũng có thể làm được:

<!-- Căn giữa -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Trước</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="#">Tiếp theo</a>
</li>
</ul>
</nav>

<!-- Căn phải -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Trước</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="#">Tiếp theo</a>
</li>
</ul>
</nav>

Sử dụng justify-content-center để căn giữa phân trang, hoặc justify-content-end để căn phải.

Căn chỉnh Sử dụng Công cụ Flex

Để có thêm kiểm soát trong việc căn chỉnh phân trang, bạn có thể sử dụng các công cụ flex của Bootstrap:

<nav aria-label="Page navigation">
<div class="d-flex justify-content-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Trước</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="#">Tiếp theo</a>
</li>
</ul>
</div>
</nav>

Ở đây, chúng ta đã bao quanh phân trang của mình trong một <div> với các lớp d-flex và justify-content-center. Điều này cho bạn thêm灵活性 trong việc định vị phân trang của mình.

Kết luận

Và thế là bạn đã có một chuyến tham quan lớn về phân trang Bootstrap. Từ cấu trúc cơ bản đến các căn chỉnh tinh tế, bạn bây giờ đã có các công cụ để tạo ra phân trang đẹp và chức năng cho các dự án web của mình. Hãy nhớ, thực hành là chìa khóa của thành công, vì vậy đừng ngại thử nghiệm với các ví dụ này.

Dưới đây là bảng tham khảo nhanh các lớp chúng ta đã覆盖:

Lớp	Mục đích
pagination	Tạo cấu trúc phân trang cơ bản
page-item	Phong cách hóa mỗi mục trong phân trang
page-link	Phong cách hóa phần có thể nhấp của mỗi mục
active	Nổi bật trang hiện tại
disabled	Vô hiệu hóa một mục phân trang
pagination-lg	Tạo phân trang lớn hơn
pagination-sm	Tạo phân trang nhỏ hơn
justify-content-center	Căn giữa phân trang
justify-content-end	Căn phải phân trang
d-flex	Tạo một container flex

Chúc các bạn lập trình vui vẻ, và hy vọng trang của bạn luôn được phân trang hoàn hảo!

Credits: Image by storyset