bewoksatukosong.com | hello semuanya balik lagi dengan om bewok, kali ini om bewok mau sharing - sharing sederhana aja nih, untuk ngajarin ke kalian cara membuat navigation bar / menubar menggunakan boostrap versi 5.
Jadi navigasi yang kita buat posisinya berada di sebelah kanan.
Kalian buat file terlebih dengan nama index.html
kita buat default nya terlebih dahulu yaa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>bikin navigation bar</title>
<link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css>" rel="stylesheet" />
<!-- Link untuk memanggil bootstrap 5 -->
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark p-2">
<!-- buat navbar / bg-dark : background hitam / navbar-dark : mengubah warna text menjadi putih -->
<!-- p-2 artinya padding $spacer * 0.5 -->
<div class="container-fluid">
<a class="navbar-brand" href="#">Anak Muda</a>
<!-- kita buat logo nya terlebih dahulu tapi saat ini kita menggunakan text -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- kita membuat button toggle untuk membuat responsive -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<!-- membuat navbar / ms-auto artinya posisi textnya akan berada di ujung kanan -->
<!-- mb-lg-0 artinya margin bottom : 0 -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<!-- membuat menu home -->
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tempat Wisata</a>
<!-- membuat menu wisata -->
</li>
<li class="nav-item dropdown">
<!-- membuat menu dropdown -->
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Lokasi Makan
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Tempat Kopi</a></li>
<li><a class="dropdown-item" href="#">Makan Hemat</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js>"></script>
<!-- memanggil javascript untuk bootstrap agar bisa responsive -->
</body>
</html>
Selesai
![Cara Koneksi Database MySql Dengan VB.NET[Visual Studio Terbaru]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcxWWBdUDRRWWYk5ZcfyVyqlscBPQ5K9mVz4jPrFwN4s3kHFjrSBs67ZZX5lCvQTHybfuUAUhURYdDlXPyOKY3qb3ROYtC1NlYQCVr4VzshytQee1svXFuW34AsOqyW8xoFdJsgCpXR4/s72-c/tutorial+vb+net.jpg)
terima kasih atas tutorialnya. setelah mengikuti langkah-langkas sesuai dengan postingan anda, saya dapat menyelesaikan tugas kuliah yaitu membuat website dengan navigasi bar yang responsive :)
ReplyDelete