Tutorial Desain Web Responsif dengan Bootstrap (Bagian 4) - Bar Navigasi Lanjut

Sabtu, 27 Mei 2017 14:03:38 ,Oleh ,Dilihat : 440 x

Diasuh oleh Dr. Ir. Agus Wibowo, M.Kom, M.Si, M.M.

1. Bilah Navigasi Tetap

Bilah navigasi juga bisa dibuat dengan letak tetap di bagian atas atau di bagian bawah halaman. Bar navigasi tetap tetap terlihat dalam posisi tetap (atas atau bawah) ketika halaman digulung ke bagian bawah. Kelas .navbar-fixed-top akan membuat panel navigasi tetap di bagian atas.

<nav class="navbar navbar-default navbar-fixed-top">


Berikut kode lengkap Bootsrap HTML 5  untuk bilah Navigasi dengan letak menu tetap diposisi bagian atas:


2. Bilah Navigasi Hitam

Jika Anda tidak menyukai tampilan bilah navigasi default, Bootstrap menyediakan alternatif, yaitu bilah navigasi hitam. Kode Bootstrap HTML 5 yang harus Anda ubah :

<nav class="navbar navbar-inverse ">

3. Bilah navigasi dropdown

Bilh navigasi juga bisa menampung menu dropdown. Contoh berikut menambahkan menu dropdown untuk tombol "Program Studi":

<li class="dropdown">
             <a class="dropdown-toggle" data-toggle="dropdown" href="#">Jurusan
             <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">Informatika</a></li>
             <li><a href="#">Sistem Informasi</a></li>
             <li><a href="#">Sistem Informasi Akuntansi</a></li>
             <li><a href="#">Desain Komunikasi Visual</a></li>
          </ul>
 </li>

Kode Bootstrap HTML5 untuk bilah navigasi dengan dropdown :


4. Bilah Navigasi di Sebelah Kanan

Kelas .navbar-right digunakan untuk menyelaraskan tombol navigasi tombol kanan. Pada contoh berikut, kita memasukkan tombol "Daftar" dan tombol "Login" di panel navigasi di sebelah kanan . Kita juga menambahkan sebuah glyphicon pada masing-masing dua tombol baru :

<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>

Kode Bootstrap HTML5 untuk bilah navigasi dengan letak di sebelah kanan :


5. Bilah Navigasi dengan Tombol

Untuk menambahkan tombol di dalam navbar, tambahkan kelas .navbar-btn pada tombol Bootstrap
<button class="btn btn-danger navbar-btn">Nama Tombol</button>

Kode Bootstrap HTML5 untuk bilah navigasi dengan tombol :


6. Bilah Navigasi Form

Untuk menambahkan elemen form ke dalam bilah navigasi, tambahkan kelas .navbar-form ke elemen form serta menambahkan kelas .input-group dan .input-group-addon untuk melampirkan ikon atau teks untuk help (bantuan) di sebelah kolom input.

<form class="navbar-form navbar-left">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Cari">
        <div class="input-group-btn">
        <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
        </button>
        </div>
    </div>
</form>

Kode Bootstrap HTML5 untuk bilah navigasi dengan Form :

TOP