logo blog
Selamat Datang Di Blog Files Parwito
Terima kasih atas kunjungan Anda di blog Kompi MalesFiles Parwito,
semoga apa yang saya share di sini bisa bermanfaat dan memberikan motivasi pada kita semua
untuk terus berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.

Cara Membuat Menu Navbar Responsive Dengan Bootstrap

Menu Navbar Responsive yaitu menu navbar yang bisa menyesuaikan diri dengan ukuran halaman web browser. Saat kondisi maksimize menu itu akan tampil semua, namun saat dalam kondisi dikecilkan maka menu itu akan menyesuaikan diri menjadi menu list. Sebagai contoh buka saja alamat http://twitter.github.com/bootstrap/

Contoh Gambar hasil dari Navbar nya :


Cara Membuat Menu Navbar Responsive Dengan Bootstrap
Script Membuat Menu Navbar Responsive Dengan Bootstrap
<!--Navbar Start @autor : Parwito-->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#">Coba1 Themes</a>
            <div class="nav-collapse subnav-collapse">
                    <ul class="nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li class="nav-header">Nav header</li>
                          <li><a href="#">Separated link</a></li>
                          <li><a href="#">One more separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                       <form class="navbar-search pull-left" action="">
                       <input class="search-query span2" placeholder="Search" type="text">
                       </form>
          </div><!-- /.nav-collapse -->
        </div>
      </div>
    </div>
<!--Navbar end-->
Enter your email address to get update from Files Parwito.
Print PDF
Next
« Prev Post
Previous
Next Post »

2 comments

dropdown nya kok gak jalan gan ? :/

Balas

Copyright © 2013. [files-parwito] - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger