Membuat Navigasi Bar Dengan Bootstrap

Navbar Bootstrap 3
Hallo semua kali ini saya akan membagikan materi tentang Membuat Navigasi Bar Dengan Bootstrap 3. navbar boostrap Boostrap merupakan framework yang di gunakan untuk membuat website jadi gampang, dan kebetulan membuat navbar dengan bootstrap ini juga sangat gampang dan mudah. dan cepat lagi karna di dalamnya sudah ada css dan berbagai macam bentuk lah intinya bootstrap ini sangat keren dah , dan pada kesempatan kali saya menggunakan bootstrap 3 untuk bootstrap 4 nanti saya akan update. dan ada 1 lagi framework javascript si javascript nya ini berguna untuk menampilkan animasi-animasi.
oke langsung saja kita praktikan oke

Bahan - Bahan :


  1. Boostrap 3 | Download
  2. JavaScript dan jquery | Download
  3. Xampp | Download
  4. Sublime Text Editor | Download
  5. Browser kalian 
Langkah-Langkah :
  1. Siapkan Boostrap 3 dan JavaScript,jquery kalian yang sudah kalian download , dan extrack lalu pindahkan ke folder xampp kalian sudah instal ,lalu pilih folder htdocs dan taruh file boostrapnya di dalam folder htdocs
Extrack Boostrap,js,jquery


Membuat Header Menu Dengan Boostrap
header menu ini judul dan tombol untuk membuka menu

Pertama-tama kita buat kerangkanya dulu seperti ini :
 <!DOCTYPE html>
<html>
<head>
 <title>Latihan Navbar</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<body>
 <div class="container">
  
  <div class="navbar navbar-default">
   <div class="container-fluid">
   <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
    </div>
   </div>
  </div>
 </div>

</body>
</html>

Hasilnya seperti ini jika :


Gambar jika di perbesar

Gambar di perkecil
Navbar Boostrap Code
Berikutnya kita sourcode untuk menulis judul :


 <a class="navbar-brand" href="dashboard.php">ChizTechno</a>
Hasil akhir



Membuat Isi Menu Dengan Boostrap

<!DOCTYPE html>
<html>
<head>
 <title>Latihan Navbar</title>
</head>
<link rel="stylesheet" type="text/css" href="Boostrap/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<body>
 <div class="container">
  
  <div class="navbar navbar-default">
   <div class="container-fluid">
   <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="dashboard.php">ChizTechno</a>
    </div>
      <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
       <li class="active"><a href="#">Home</a></li>
               <li><a href="#">Programming</a></li>
                <li><a href="#"> Technology</a></li>
                <li><a href="#"> Berita</a></li>
       </ul>
      </div>
   </div>
  </div>
 </div>

</body>
</html>

Nah hasil akhir nya seperti ini :


Tampilan Versi Dekstop


Tampilan Versi Mobile
Nah mungkin segitu saja tutorial dari saya tentang Membuat Navigasi Bar Dengan Bootstrap
Baca " Membuat Fungsi Input nilai dengan PHP "

Memang sangat gampang membuat tambahan website dengan boostrap tapi harus di pelajari dasar dasar html ya agar biar lebih enak dan gak kaku 
Mohon maaf jika ada kesalahan untuk yang kurang mengerti diharapkan komen ya insya allah saya akan menjawabnya


Perhatian "Jika tidak mengerti comment dibawah"
Untuk yang masih kurang mengeri bisa liat vidio pembuatannya di bawah ini :

Jangan Lupa Like,Comment,Share And Subscribe

1 Response to "Membuat Navigasi Bar Dengan Bootstrap"