Phân trang Bootstrap
Phân trang cơ bản
Nếu bạn có một trang web có nhiều trang, bạn có thể muốn thêm một số kiểu phân trang vào mỗi trang.
Phân trang cơ bản trong Bootstrap trông như thế này:
Để tạo phân trang cơ bản, hãy thêm lớp .pagination
vào phần tử <ul>
:
Ví dụ
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Hãy tự mình thử »Trạng thái hoạt động
Trạng thái hoạt động hiển thị trang hiện tại là gì:
Thêm lớp .active
để cho người dùng biết họ đang ở trang nào:
Ví dụ
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Hãy tự mình thử » Trạng thái bị vô hiệu hóa
Một liên kết bị vô hiệu hóa không thể nhấp vào được:
Thêm lớp .disabled
nếu một liên kết vì lý do nào đó bị vô hiệu hóa:
Ví dụ
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Hãy tự mình thử »Định cỡ phân trang
Các khối phân trang cũng có thể được điều chỉnh kích thước thành kích thước lớn hơn hoặc kích thước nhỏ hơn:
Thêm lớp .pagination-lg
cho các khối lớn hơn hoặc .pagination-sm
cho các khối nhỏ hơn:
Ví dụ
<ul class="pagination pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Hãy tự mình thử »vụn bánh mì
Một hình thức khác để phân trang là breadcrumbs:
Lớp .breadcrumb
cho biết vị trí của trang hiện tại trong hệ thống phân cấp điều hướng:
Ví dụ
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
Hãy tự mình thử » Tham khảo điều hướng Bootstrap hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về tất cả các lớp điều hướng, hãy truy cập Tài liệu tham khảo điều hướng Bootstrap đầy đủ của chúng tôi.