Thanh W3.CSS
Thanh ngang
Thanh ngang là yếu tố thiết kế web phổ biến:
Lớp w3-bar được sử dụng để tạo kiểu cho thanh ngang:
Ví dụ
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Mục đích của lớp w3-bar-item là cung cấp khoảng cách, phần đệm và vị trí chính xác.
Thanh dọc
Thanh dọc (sidebars) cũng thường gặp trong thiết kế web:
Lớp w3-bar-block được sử dụng để tạo kiểu cho thanh dọc:
Ví dụ
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Màu thanh
Bạn có thể sử dụng bất kỳ màu nào để tạo kiểu cho thanh:
Ví dụ
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Màu di chuột
Bạn có thể sử dụng bất kỳ màu di chuột nào để tạo kiểu cho thanh:
Di chuột qua các mục trên thanh để xem hiệu ứng:
Ví dụ
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
Liên kết thanh
Cung cấp điều hướng là cách sử dụng điển hình cho các thanh:
Ví dụ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
Nút thanh
Lớp nút w3 hoàn hảo để tạo kiểu cho các liên kết trong một thanh.
Di chuột qua các mục trên thanh để xem hiệu ứng:
Ví dụ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
Thanh đáp ứng
Lớp w3-mobile hoàn hảo để làm cho các mục thanh có tính phản hồi cao.
Thay đổi kích thước cửa sổ để xem hiệu ứng:
Ví dụ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
Các mục thanh căn phải
Lớp w3-right hoàn hảo để căn chỉnh các mục trên thanh:
Ví dụ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>