Beranda
bootstrap
html
Membuat navbar responsive bootstrap 5
Teranix
Oktober 20, 2024

Membuat navbar responsive bootstrap 5

 


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


<html>
   <head>
      <meta charset="utf-8" />
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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>
[btn style="rounded" url="https://demokodeteks.blogspot.com/2024/10/navbar-bootstrap-5-demo.html"]Lihat Demo[/btn]

Postingan Lama
Postingan Lebih Baru

Penulis blog

Teranix
Teranix

Anda mungkin menyukai postingan ini

Tidak ada komentar