Cara Membuat Navbar dengan menggunakan Bootstrap

Navbar merupakan suatu navigasi pada web yang umumnya terletak di atas taman. Navbar mempunyai guna buat berikan petunjuk pengguna melalui data menu/ jenis yang diberikan, Sehingga user dapat dengan gampang berpindah taman bersumber pada link yang diberikan lewat navigasi bar tersebut. Kali ini aku hendak share serta mangulas secara lengkap metode membuat navbar dengan bootstrap. 

Konfigurasi Bootstrap

Sebelum kita membuat navbar dengan bootstrap, maka tentunya kita perlu konfigurasi css bootstrap nya terlebih dahulu ya, ada dua metode yang bisa kita gunakan yang pertama adalah metode dengan teknik CDN (Content Delivery Network) dengan teknik ini kita dapat langsung menggunakan bootstrap melalui koneksi jaringan internet tanpa perlu instalasi atau download ke lokal drive kita. Berikut ini adalah beberapa file yang dibutuhkan untuk membuat navbar. Diantaranya css bootstrap dengan versi 4.3.1, Jquery dengan versi 3.4.1 popper.js dan js dari bootstrap sendiri.

<!-- Load file CSS Bootstrap dengan CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Jika kalian tidak ingin menggunakan metode CDN, maka kalian perlu mendownload file2 tersebut kedalam lokal driver kalian. Lalu kemudian di panggil dari dalam tag <head>.

Oke langsung saja buat sebuah file bisa dengan format html maupun php. Copy script dibawah ini, lalu coba jalankan di browser.

<!DOCTYPE html>
<html>
<head>
    <!-- Load file CSS Bootstrap melalui CDN-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body><div class="container">
    <nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>
    </nav>

</body></html>
Dari Script program diatas akan menghasilkan navbar dengan tipe standar ya, seperti pada gambar berikut:
navbar standar
Dengan Bootstrap kita bisa membuat navbar dengan berbagai warna dan juga fitur tambahan, seperti menambahkan logo, menu dropdown dan collaps. Simak pembahasan dibawah ini:
Medifikasi Warna Navbar
Didalam bootstrap terdapat bermacam-macam warna yang bisa kita gunakan untuk navbar yang kita buat. Caranya juga sangat mudah kita cukup memanggil class bg-color pada element navbarnya.
  1. bg-primary
  2. bg-success
  3. bg-info
  4. bg-warning
  5. bg-danger
  6. bg-secondary
  7. bg-light
  8. bg-dark
Contoh kita akan membuat navbar dengan warna background orange, maka kita gunakan class bg-warning
  1.     <nav class="navbar navbar-expand-sm bg-warning">
    .........
    </nav>
    mengatur warna navbar di bootstrap
    Kalian bisa coba sendiri dengan warna yang lain berdasarkan class background yang saya sebutkan diatas.
  2. Navbar dengan Logo Gambar
    Selanjutnya dengan bootstrap kita juga dapat membuat navbar dengan style logo didalamnya. Fitur ini bisa kita pakai untuk memasang logo website kita. Caranya kita perlu menambah tag <a> lalu di ikuti dengan atribut class=’navbar-brand’. Contohnya seperti pada sintak dibawah ini
    <nav class="navbar navbar-expand-sm bg-dark navbar-light">
  <a class="navbar-brand" href="#">
     <img src="apple.png" alt="Logo" style="width:40px;">
  </a>
  ...
</nav> 
    navbar dengan logo
    Navbar dengan Menu DropDown
    Selanjutnya kita juga bisa membuat menu dropdown di navbar. Yang perlu kita lakukan adalah memanggil class dropdown pada list item di navbar yang kita buat. Untuk lebih jelasnya perhatikan sintak dibawah ini:
  3. <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- Brand -->
        <a class="navbar-brand" href="#">
            <img src="apple.png" alt="Logo" style="width:40px;">
        </a>

        <!-- Links -->
        <ul class="navbar-nav">
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Dropdown link
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
        </ul>
    </nav>
Tahap pertama kita panggil dulu class nav-item dropdown nya kemudian dri item tersebut ketika di klik maka akan muncul list item dropdown-nya.
navbar dengan menu dropdown
Navbar dengan Form dan Button
Selanjutny kita dapat membuat navbar yang didalamnya terdapat form input dan button. Saya sering lihat fitur ni sering digunakan oleh website yang biasanya menggunakan template dari bootstrap. Untuk membuatnya kita cukup menambahkan tag <form> didalam navbar yang kita buat. Yang perlu diperhatikan sebaiknya form menggunakan class form-inline sehingga komponen form akan sejajar dengan navbar-nya.
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="#">
    <input class="form-control mr-sm-2" type="text" placeholder="Cari">
    <button class="btn btn-primary" type="submit">Cari</button>
  </form>
</nav> 
navbar dengan form input dan button
Navbar dengan fitur Collaps
Terakhir, kita dapat menambahkan fitur Collaps untuk membuat efek responsive navbar. Jadi ketika navbar dibuka pada layar smartpohe dapat di buka dengan tombol collaps
 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav> 
Sekian dari saya mengenai cara membuat navbar dengan bootstrap. Semoga bermanfaat, dan inilah laporan magang saya pada blog ini maaf jika ada kekurangan pada blogg ini mohon dimaafkan, terima kasih.

Komentar

Posting Komentar