Membuat Navigation Bar Bootstrap

Membuat Navigation Bar Bootstrap tidak lah sulit. seperti pada tutorial-tutorial bootstrap sebelumnya anda hanya perlu manambah class-class yang sudah di sediakan oleh bootstrap. pada tutorial bootstrap part 12 : membuat navigation bar bootstrap ini akan di jelaskan tentang cara membuat menu navigasi dengan sangat mudah dan cepat. secara default navigation bar bootstrap memiliki dua warna, yaitu default dan inverse yang akan di lihat pada tutorial bootstrap part 12 : Membuat Navigation Bar Bootstrap ini.

navigation bar bootstrap di buat dengan menggunakan tag <nav>. dan letakkan di dalam tag <body> html di paling atas.

Membuat navigation bar bootstrap

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE html>

<html>

<head>

 <title>Bootstrap Part 12 : Membuat Navigation bar Bootstrap</title>

 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript" src="js/bootstrap.js"></script>

</head>

<body>

 <nav class="navbar navbar-default">

  <div class="container-fluid">

   <div class="navbar-header">

    <a class="navbar-brand" href="https://www.malasngoding.com">Malas Ngoding</a>

   </div>

   <ul class="nav navbar-nav">

    <li class="active"><a href="https://www.malasngoding.com">Home</a></li>

    <li><a href="#">Profil</a></li>

    <li><a href="#">Tentang Kami</a></li> 

    <li><a href="#">Kontak</a></li> 

   </ul>

   <ul class="nav navbar-nav navbar-right">

   <li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>

    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

   </ul>

  </div>

 </nav>

 <h1>Membuat Navigation bar Bootstrap | www.malasngoding.com</h1> 

</body>

</html>

membuat navigation bar bootstrap

perhatikan pada contoh di atas, di sini akan di jelaskan sedikit masing-masing kegunaan dari class-class yang dalam membuat navigation bar bootstrap. dapat di lihat pada contoh di atas untuk membuat menu navigation bootstrap gunakan class

1

<nav class="navbar navbar-default">

class “navbar-default” di gunakan untuk membuat navigation bar dengan model standart. anda bisa menggantinya dengan “navbar-inverse” untuk membuat menu navigation bar bootstrap dengan model gelap. kemudian

1

<div class="container-fluid">

di gunakan untuk membuat sisi menu navigation penuh atau full. anda bisa menggantinya menjadi

1

<div class="container">

untuk membuat sisi menu navigation bar tidak penuh atau full width. dan class

1

2

3

<div class="navbar-header">

 <a class="navbar-brand" href="https://www.malasngoding.com">Malas Ngoding</a>

</div>

di gunakan untuk membuat bagian header dari menu navigation bootstrap. “navbar-header” untuk mendefinisikan bagian header menu navigation. dan “navbar-brand” di gunakan untuk mendefinisikan judul website.

Search This Blog

World Tech Reader

Membuat Navigation Bar Bootstrap

Membuat navigation bar bootstrap