Membuat Navbar

Dindan Pedia

Assalamualaikum Wr. Wb.

Ahmad Dindan Romadhoni

Membuat Navbar Menggunakan Bootstrap 4

Navbar adalah  singkatan dari Navigation bar. Merupakan  komponen website yang berupa menu. yang biasanya terletak pada header website. Komponen Navbar biasanya digunakan untuk membuat navigasi yang terletak pada bagian header website. Biasa kita sebut sebagai menu utama dari sebuah website. Karena terletak pada bagian header yang paling atas. Komponen navbar sangat powerfull. Selain responsive, pada navbar juga biasa kita letakan logo atau nama website.

Pertama buatlah folder dalam folder htdocs, lalu buatlah file dalam folder yang anda bikin dengan nama index.html  kemudian hubungkan file project anda dengan bootstrap.Dalam menghubungkan file project anda dengan bootrstrap terdapat dua cara yaitu online dan offline.Tapi pada kali ini kita akan membahas menghubungkan dengan cara yang online.Caranya anda hanya perlu menambahkan starter template dari bootstrap.

starter template

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 

    <title>Hello, world!</title>

  </head>

  <body>

    <h1>Hello, world!</h1>

 

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>

</html>

 Hasilnya adalah sebagai berikut:



Selanjutnya cara membuat navbar dengan bootstrap adalah masukan script berikut diantara css dan js dari bootstrap.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" 
aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>

</nav>
Dan hasilnya adalah:
ok selesai.Terimakasih sudah membaca cara membuat navbar dengan bootstrap4.

0 Komentar