Membuat Navs dan Navbar Dengan Bootstrap

16 December 2016
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:
    navbar
  • 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:
    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:
  • 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:
    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:
  • 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:
  • 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:
    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:

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:


    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:
    def-navbar
    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:


  • 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:

  • 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.

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 23:55

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi