Beranda / bootstrap / html

Membuat navbar responsive bootstrap 5

by Teranix Posting Komentar

Membuat navigasi bar adalah hal yang cukup mudah, apalagi dengan adanya framework Bootstrap yang mempermudah pembuatan desain website dengan cepat dan mudah. Dalam artikel ini kita hanya perlu menggunakan satu file dokumen saja ( index.html ), tidak perlu membuat file dokumen tambahan seperti CSS atau Javascript. Kenapa? karena dalam bootstrap sudah include CSS dan juga Javascript.

Menarik bukan?  Sekarang kita lanjut ke langkah-langkah pembuatannya.

Langkah 1 : Buat file index.html

Salin kode dibawah ini :

<!Doctype html> <html > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>NavigasiBar</title> <link href="" rel="stylesheet"> <script src="" ></script> </head> <body> </body> </html>

Langkah 2 : Install Bootstrap

Installasi bootstrap ada beberapa cara, namun kita akan menggunakan cara yang umum digunakan untuk membuat website sederhana yaitu dengan : 

- Install dengan cara download semua compiled code 

- Install dengan CDN via jsDelivr

Cara yang pertama, kalian bisa mendownload compiled codenya di website bootstrap  getbootstrap.com lalu klick Download pada halaman tersebut.


jika sudah terdownload ekstrak file .zip tersebut. Terdapat 2 folder didalamnya CSS dan JS, folder tersebutlah yang nantinya akan digunakan ketika menulis code.


Cara menggunakan bootstrapnya cukup pindahkan folder CSS dan Js ke projek yang kalian akan buat, disini saya membuat folder bernama bootstrap dan berisikan folder CSS dan JS yang sudah di ekstrak sebelumnya.


sehingga ketika penulisan code dalam index.html nanti akan menjadi seperti ini : 

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>

Cara yang kedua, install menggunakan CDN via jsDelivr hanya perlu menyalin code yang sudah ada urlnya. Kalian bisa lihat codenya di sini cdn-via-jsdelivr .


atau bisa juga kalian salin code dibawah ini :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

salin code tersebut kedalam index.html tepatnya didalam tag <head>. Untuk code javascript bisa disimpan didalam <head> atau sebelum </body>. Cara kedua ini cukup mudah namun membutuhkan koneksi internet ketika running, jika tidak ada internet maka CSS dan JS tidak akan bisa dipanggil.

Langkah 3 : Membuat Navigasi

Kita akan menggunakan kode sederhana dari bootstrap, kalian bisa melihat banyak pilihan component navbar disini component-bootstrap. Silahkan salin kode dibawah ini untuk melanjutkan : 

<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom border-2 shadow">     <div class="container-fluid">         <a class="navbar-brand" href="#">         <img src="" class="" width="100" height="50" alt="kodeteks"/>         </a>         <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse" type="button">         <span class="navbar-toggler-icon"></span>         </button>          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">         <ul class="navbar-nav fs-6">          <li class="nav-item p-2">         <a aria-current="page" class="nav-link active" href="#">Beranda</a>          </li>         <li class="nav-item p-2">          <a class="nav-link" href="#">Galeri</a>         </li>         <li class="nav-item p-2">          <a class="nav-link" href="#">Tentang Kami</a>         </li>         <li class="nav-item p-2">         <a class="nav-link" href="#">Hubungi Kami</a>         </li>         </ul>         </div>     </div> </nav>

Lihat Hasilnya : 


Langkah 4 : Optional

Pada bagian code logo ini:

  <img src="" class="" width="100" height="50" alt="kodeteks"/> 

kalian bisa mengisi src="" dengan tempat dimana file foto kalian berada, bisa juga menambahkan dengan URL jika foto ada di jangkauan internet.

Untuk mengganti background kalian cukup ganti code pada class navbar bg-body-tertiary dengan beberapa warna yang sudah tersedia di bootstrap, pilihan warna bisa kalian lihat disini Bootstrap-Color.

Jika kalian menginginkan posisi navigasi berada di kiri dekat dengan logo, silahkan hapus code yang bertanda merah seperti dibawah ini: 


<div class="collapse navbar-collapse justify-content-end" id="navbarNav">


Baca Juga : 

Posting Komentar untuk "Membuat navbar responsive bootstrap 5"

Posting Komentar