Membuat Navs dan Navbar Dengan Bootstrap

Sekarang kita belajar 2 hal sekaligus, yaitu Navs dan Navbar. Tanpa basi-basi, langsung saja kita ke pokok pembahasan..

Navs

• Tabs

  Contoh penggunaan:

  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages

• Pills

  Contoh penggunaan:

  <ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages

  Pills juga bisa dibuat vertikal dengan menambahkan nav-stacked
  Contoh penggunaan:

  <ul class="nav nav-pills nav-stacked">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages

• Justified

  Untuk membuat lebar Navs ataupun Pills sesuai ukuran induknya, gunakan nav-justified. Pada layar yang kecil, Nav links akan tersusun secara vertikal
  Contoh penggunaan pada Navs:

  <ul class="nav nav-tabs nav-justified">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages

  Contoh penggunaan pada Pills:

  <ul class="nav nav-pills nav-justified">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages

• Disabled links

  .disabled digunakan untuk menonaktifkan link pada Navs maupun Pills
  Contoh penggunaan:

  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation" class="disabled"><a href="#">Messages</a></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages

• Penggunaan Dropdowns

  Untuk menggunakan dropdown, cukup tambahkan kelas .dropdown
  Contoh penggunaan pada Navs:

  <ul class="nav nav-tabs">
  <li class="active" role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li class="dropdown" role="presentation"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Messages<span class="caret"></span></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 role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages Action Another action Something else here Separated link

  Contoh penggunaan pada Pills:

  <ul class="nav nav-pills">
  <li class="active" role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li class="dropdown" role="presentation"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Messages<span class="caret"></span></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 role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages Action Another action Something else here Separated link

Navbar

• Default navbar

  Contoh penggunaan:

  <nav class="navbar navbar-default">
    <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
          <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="#">Brand</a>
      </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li class="dropdown">
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"#" role="button">Dropdown <span class="caret"></span></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>
  </ul>
  </li>
  </ul>
  </div>
  <!-- /.navbar-collapse -->
    </div>
  <!-- /.container-fluid -->
  </nav>

  Hasilnya:
  

  Brand Home(current) About Contact Dropdown Action Another action Something else here

  Sebenarnya warna default Navbar adalah abu-abu, tapi di contoh saya berwarna biru. Hal ini dikarenakan template saya sudah di custom. Penampakan default Navbar yang asli seperti gambar dibawah ini:
  Bila ingin merubah warnanya, kita perlu menambahkan CSS pada template. Kalau tidak mau ribet, kita bisa mendownload di Bootswatch. Disana ada banyak pilihan warna (Custom Bootstrap)

  Bila kita ingin menaruhnya di sisi sebelah kanan, cukup tambahkan kelas .navbar-right Contoh penggunaan:

  <nav class="navbar navbar-default">
    <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
          <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="#">Brand</a>
      </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
  <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
  </div>
  <!-- /.navbar-collapse -->
    </div>
  <!-- /.container-fluid -->
  </nav>

  Hasilnya:
  

  Brand Home(current) About Contact

• Forms

  Contoh penggunaan:

  <nav class="navbar navbar-default">
    <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
          <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="#">Brand</a>
      </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
  </ul>
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  </div>
  <!-- /.navbar-collapse -->
    </div>
  <!-- /.container-fluid -->
  </nav>

  Hasilnya:
  

  Brand Home(current)

• Component alignment

  • Static Top
    Untuk membuat Navbar memanjang penuh mengikuti layar, kita perlu menambahkan kelas .navbar-static-top. Masukkan juga .container atau .container-fluid
    Formatnya seperti ini:

    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        ...
      </div>
    </nav>

  • Fixed Top
    Untuk membuat Navbar melayang di atas saat di scroll, gunakan kelas .navbar-fixed-top. Masukkan juga .container atau .container-fluid
    Formatnya seperti ini:

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        ...
      </div>
    </nav>

  • Fixed Bottom
    Untuk membuat Navbar melayang di bawah saat di scroll, gunakan kelas .navbar-fixed-top. Masukkan juga .container atau .container-fluid
    Formatnya seperti ini:

    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="container">
        ...
      </div>
    </nav>

  • Inverted Navbar
    Sebenarnya sama dengan default navbar. Bedanya, warna navbar menjadi lebih gelap Formatnya seperti ini:

    <nav class="navbar navbar-inverse">
        ...
     </nav>

Oke.. Pembahasan Navs dan Navbar saya rasa cukup. Selanjutnya kita akan membahas cara pembuatan breadcrumbs dengan bootstrap. Tetap semangat belajarnya ya... Semoga sukses.

INGAT!!!
jika ingin mencobanya secara offline, masukkan script diatas pada template dasar diantara kelas .container atau .container-fluid (hapus tulisan <!-- AWAL KONTEN --> sampai <!-- AKHIR KONTEN -->). Jika belum punya template dasar, anda bisa membacanya disini