Phân trang W3.CSS
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 sử dụng một số kiểu phân trang.
Để tạo phân trang cơ bản, hãy sử dụng các nút ( w3-button ) trong một thanh ( w3-bar ).
Ví dụ
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#"
class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
Để xóa khoảng cách giữa các nút, hãy thêm lớp w3-bar-item :
Ví dụ
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Mũi tên phân trang
Sử dụng các thực thể hoặc biểu tượng HTML từ thư viện biểu tượng để thêm mũi tên phân trang:
Ví dụ
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Liên kết đang hoạt động/hiện tại
Sử dụng một trong các lớp màu w3- để cho biết người dùng đang truy cập trang nào:
Ví dụ
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
Màu di chuột
Theo mặc định, khi bạn di chuyển chuột qua các liên kết phân trang, chúng sẽ có màu nền xám. Sử dụng bất kỳ lớp w3-hover- color nào để thay đổi màu di chuột:
Ví dụ
<div class="w3-bar">
<a href="#"
class="w3-button w3-hover-purple">«</a>
<a
href="#" class="w3-button w3-hover-green">1</a>
<a href="#"
class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button
w3-hover-blue">3</a>
<a href="#"
class="w3-button w3-hover-black">4</a>
<a href="#"
class="w3-button w3-hover-orange">»</a>
</div>
Định cỡ phân trang
Sử dụng w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge hoặc w3-xxxlarge để định cỡ phân trang:
Phân trang ở giữa
Để căn giữa phân trang, đặt phần tử "w3-bar" bên trong phần tử "w3-center":
Ví dụ
<div class="w3-center">
<div class="w3-bar">
<a href="#"
class="w3-bar-item w3-button">«</a>
<a href="#"
class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#"
class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
Phân trang có viền
Thêm lớp w3-border để tạo phân trang có viền:
Đường viền tròn
Thêm lớp w3-round bên cạnh w3-border cho đường viền tròn:
Các ví dụ về phân trang khác
Lớp w3-bar cũng có thể được sử dụng để tạo các nút tiếp theo/trước:
Tiếp theo/trước Ví dụ
<div class="w3-bar w3-border w3-round">
<a href="#"
class="w3-button">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</a>
</div>
Ví dụ về menu nội tuyến
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>