W3.CSS Bar
Batang Horisontal
Batang horizontal adalah elemen desain web yang umum:
Kelas w3-bar digunakan untuk menata bilah horizontal:
Contoh
<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>
Tujuan dari kelas w3-bar-item adalah untuk memberikan spasi, padding, dan pemosisian yang benar.
Batang Vertikal
Bilah vertikal (bilah samping) juga umum dalam desain web:
Kelas w3-bar-block digunakan untuk menata bilah vertikal:
Contoh
<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>
Warna Batang
Anda dapat menggunakan warna apa saja untuk menata bilah:
Contoh
<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>
Arahkan Warna
Anda dapat menggunakan warna hover apa saja untuk menata bilah:
Arahkan mouse ke item bilah untuk melihat efeknya:
Contoh
<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>
Tautan Batang
Menyediakan navigasi adalah penggunaan umum untuk bilah:
Contoh
<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>
Tombol Batang
Kelas tombol w3 sangat cocok untuk menata tautan di bilah.
Arahkan mouse ke item bilah untuk melihat efeknya:
Contoh
<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>
Bilah Responsif
Kelas w3-mobile sempurna untuk membuat item bar menjadi responsif.
Ubah ukuran jendela untuk melihat efeknya:
Contoh
<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>
Item Bar Rata Kanan
Kelas w3-right sangat cocok untuk membuat item bar rata kanan:
Contoh
<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>