W3.CSS Bar


London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo

Batang Horisontal

Batang horizontal adalah elemen desain web yang umum:

London
Paris
Tokyo

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:

London
Paris
Tokyo

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:

London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo

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:

London
Paris
Tokyo

London
Paris
Tokyo

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:

London
Paris
Tokyo

London
Paris
Tokyo

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:

London
Paris
Tokyo

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:

London
Paris
Tokyo

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>