Phân trang W3.CSS
Phân trang cơ bản
Nếu bạn có một trang web với nhiều trang, bạn có thể muốn sử dụng một số loại 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 ).
Thí 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>
Để loại bỏ khoảng cách giữa các nút, hãy thêm một lớp w3-bar-item :
Thí 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 các mũi tên phân trang:
Thí 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 Hoạt động / Hiện tại
Sử dụng một trong các lớp w3- color để cho biết người dùng đang truy cập trang nào:
Thí 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 nào của w3-hover- color để thay đổi màu khi di chuột:
Thí 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 để phân trang:
Thí dụ
<div class="w3-bar
w3-xlarge">
Phân trang ở giữa
Để căn giữa phân trang, hãy đặt phần tử "w3-bar" bên trong phần tử "w3-center":
Thí 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 với các đường viền:
Thí dụ
<div class="w3-bar
w3-border">
Viền tròn
Thêm lớp w3-round bên cạnh w3-border cho các đường viền tròn:
Thí dụ
<div class="w3-bar
w3-border w3-round">
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 đó:
Ví dụ tiếp theo / trước đó
<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>