Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Random Posts

Banner

Breaking

BitMiner - free and simple next generation Bitcoin mining software

Monday, 17 April 2017

Belajar Bootstrap Part 12 Membuat Navigation Bar Dengan Bootstrap

Assalamualaikum Wr. Wb.

Halo sobat , pada kesempatan kali ini saya akan sedikit berbagi materi / tutorial membuat navigasi responsive menggunakan Bootstrap. Dalam penggunaan bootstrap kita sangatlah mudah untuk membuat suatu navigasi dalam website , karena kita hanya tinggal memanggil parameter parameter CSS yang sudah di sediakan oleh bootstrap.

PEMBAHASAN

Agar lebih jelasnya kita langsung masuk saja ke contoh dan penjelasan di bawahnya. Di bawah ini adalah contoh dari navbar yang saya buat menggunakan bootstrap.


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Navigasi Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Nama Website</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Responsive Navbar</h3>
  <p>Membuat navigasi bar yang responsive dengan menggunakan Bootstrap</p>
</div>

</body>
</html>
Dan hasilnya seperti berikut.


Untuk lebih jelasnya saya akan memberi penjelasan sedikit tentang script di atas:

Dlam pembuatan file navigasi ini saya menggunakan bootstrap offline yang saya download dan saya letakka dalam satu folder dengan file html nya.


<nav class="navbar navbar-inverse"> script tersebut merupakan pemanggilan parameter style navigasi yang di buat oleh bootstrap.
 

class="navbar header" adalah sebagai judul dari navigasi
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> script tersebut digunakan umtuk menyembunyikan navigasi apabila di buka di perangkat yang lebuh kecil dari PC/Dekstop.
class="dropdown" digunakan untuk memberi submenu pada navigasi.
class="dropdown-menu" adalah isi dai submenu .
navbar-right adalah posisi navbar di kanan

Ok , itu saja penjelasan dari saya , jika masih belum jelas kawan kawan bisa membuka referensi lain misal di w3school

KESIMPULAN
Pembuatan navbar dengan bootstrap dapat mempercepat kita dalam membuat navigasi dan membuat navigasi lebih menarik dan responsive.

Referensi

 w3schools

No comments:

Post a Comment

Adbox