W3.CSS Thanh
Thanh ngang
Các thanh ngang là các yếu tố thiết kế web phổ biến:
Lớp w3-bar được sử dụng để tạo kiểu cho một thanh ngang:
Thí 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, khoảng đệm và vị trí chính xác.
Thanh dọc
Thanh dọc (thanh bên) cũng phổ biến trong thiết kế web:
Lớp w3-bar-block được sử dụng để tạo kiểu cho một thanh dọc:
Thí 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:
Thí 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:
Thí 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:
Thí 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>
Các 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:
Thí 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 vật dụng dạng thanh trở nên nhạy bén.
Thay đổi kích thước cửa sổ để xem hiệu ứng:
Thí 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>
Mục Thanh Căn Phải
Lớp w3-right hoàn hảo để làm cho các mục thanh được căn phải:
Thí 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>