Cara Membuat Navbar Dengan Bootstrap 3

Cara Membuat Navbar Dengan Bootstrap 3

Cara Membuat Navbar Dengan Bootstrap 3 –  Bertemu lagi bareng kita Koding Budi yang senantiasa membahas seputar pemrograman. Dan kali ini Koding Budi berkesempatan untuk membahas Cara Membuat Navbar Dengan Bootstrap 3.

Cara Membuat Navbar

Navbar dibuat dengan memakai tag HTML 5 <nav>, ditata melalui beberapa class navbar, serta bekerja memakai javascript. Peletakannya persis sesudah tag pembuka <body> , seperti berikut ini

     <nav class="navbar navbar-default">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Koding Budi</a>
              </div>
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Bootstrap <span class="sr-only">(current)</span></a></li>
                  <li><a href="#">HTML</a></li>
                  <li><a href="#">CSS</a></li>
                  <li><a href="#">Javascript</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <button type="submit" class="btn btn-default">Cari</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                </ul>
              </div>
            </div>
          </nav>

Bila dibuka dari desktop, akan menghasilkan navbar seperti berikut ini.

Sedangkan saat diakses dari hp, tampilannya akan berubah seperti berikut ini

Pada layar ponsel, daftar menu utama akan disembunyikan serta menjadi tombol toggle. Bila di-klik, maka menu utama baru ditampilkan. untuk memberi efek highlight pada item menu aktif, pada tag <li> digunakan class active.

You May Also Like

About the Author: admin

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *