Tutorial Belajar Membuat Navigasi Bar Rasponsive Dengan Bootstrap 4

Navigasi Bar atau biasa disebut Navbar pada sebuah website adalah salah satu bagian yang cukup penting, karena dengan penempatan navigasi serta responsive yang baik maka akan mempermudah pengunjung website kita mencari konten yang sesuai dengan diinginkannya.

Berikut contoh tampilan menu Navigasi pada Bootstrap 4  :

Maka dari itu pada tutorial kali ini menarik dan jangan sampai dilewatkan, karena kita akan membahas bagaimana cara membuat navigasi bar dengan Bootstrap v.4.0, sebelum anda mencoba membuat tutorial ini disarankan untuk membaca artikel sebelumnya tentang 3 langkah mudah belajar bootstrap v.4.0 untuk pemula.

Untuk membuat Navigasi bar dengan menggunakan Bootstrap tidak sulit, seperti pada tutorial sebelumnya, kita tinggal menambah class yang sudah disediakan bootrstrap.

Navigasi Bar pada Bootstrap dibuat dengan menggunakan tag <nav> yang diletakan dalam tag <body>, berikut ini langkah dalam membuat nav bar pada bootstrap.

Ok langsung saja kita praktek, tetapi sebelumnya sahabat sediakan cemilan dan minuman untuk menemani kita didalam membuat navigasi bar ini agar tidak mengantuk, 🙂 berikut langkah-langkahnya.

Buat file html nav_bar.html ketikan kode sebagai berikut :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <title>Membuat Navbar Dengan Bootstrap v.4.0</title>
    
  </head>
  <body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light"> 	
  <a class="navbar-brand" href="#">
    <img src="bootstrap.png" width="30" height="30" class="d-inline-block align-top" alt=""> Ilmuweb</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Portofolio
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Galery</a>
          <a class="dropdown-item" href="#">Ebook</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">lainya</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<br>
<center><h3>Belajar Membuat Navbar Dengan Bootsrap 4</h3></center>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  </body>
</html>

 

Tampilan hasil navigasi bar Bootstrap dari kode diatas sebagai berikut.

Naviggasi ini kita buat dengan beberapa komponen yakni terdapat navigasi dengan link dimana terdapat menu home, about, portofolio, contact, biasa menuju halaman tertentu, dropdown menu pada Portofolio, dan kolom untuk pencarian artikel atau biasa kita kenal dengan seacrh.

Perhatikan contoh kode diatas, untuk menjalankannya anda harus sambil terhubung dengan Internet.

Dari kode diatas disini akan dijelaskan sedikit masing-masing class-class yang digunakan untuk membuat navbar.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Pada kode diatas adalah untuk mengambil CSS dan library jqwery pada javascript yang dibutuhkan untuk mengambil CSS dan Javascript. Kekurangannya apabila kita menjalankan kode program diatas harus terkoneksi ke Internet untuk mengambil library jqwery.

Maka ada sedikit tips,  suapaya sahabat tidak mendownload library tersebut diatas, maka download terlebih dahulu dan ditaruh pada komputer kita alias menjadi localhost.

Selanjutnya class nav yang kita panggil terletak pada tag berikut :

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Pada navigasi bar yang kita buat ini otomatis telah responsive, jadi kita tidak perlu lagi mengatur ukuran seting responsive pada Bootstrap.

Bagaimana cara merubah warna Navbar?.. berikut caranya tinggal mengganti kode pada class <nav>

Navbar warna terang (standar).

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Navbar Warna Biru

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">

Navbar warna Gelap.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

Navbar warna lainnya

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">

 

Untuk lebih lengkapnya sahabat bisa mencoba sendiri download source kode navbar disini.

Ok sekian dulu sahabat tutorial ini, semoga bisa dipahami serta mempraktekannya sehingga dapat membuat navigasi bar dengan bootstrap 4.

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *