Hallo teman semua, pada kali ini saya akan memposting bagaimana caranya membuat navbar menggunakan bootstrap. Berikut langkah-langkahnya
PENGERTIAN
Navbar atau navigation bar adalah bagian antarmuka pengguna grafis yang digunakan untuk mempermudah pengguna untuk mengakses informasi. Selain teks navbar juga berisikan gambar yang ber-link.
LATAR BELAKANG
Navbar atau navigation bar digunakan untuk mempermudah pengguna untuk mengakses informasi, biasanya navbar berisikan link, maupun gambar yang ber-link.
MAKSUD DAN TUJUAN
Untuk membantu pengguna untuk mempermudah mengakses informasi serta untuk membagikan cara membuatnya.
ALAT DAN BAHAN
- Laptop
- Sublime text
- Sublime
TAHAP PELAKSANAAN
Membuat Navbar :
- Pertama siapkan file bootstrap.
- Kemudian buat file baru diberi nama navbar.html
- Kalau sudah bisa anda ikuti script yang dibawah ini.
<html lang="en">
<head>
<title>navbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=stylesheet href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">NAVBAR</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</nav>
</body>
</html>
- Hasilnya akan muncul seperti dibawah ini.
Keterangan :
- <nav class="navbar navbar-default">, untuk tampilan standart pada navbar.
- <div class="container-fluid">, untuk membuat isi menu navbar penuh atau full.
- <div class="navbar-header">, untuk mendefinisikan bagian header pada navigation.
- Membuat isi menu link
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
KESIMPULAN
Dengan menggunakan navbar dapat mempermudah pengguna untuk mengakses informasi.
REFERENSI
http://www.malasngoding.com/membuat-navigation-bar-bootstrap/
Sekian dan terimakasih
0 komentar:
Posting Komentar