Assalammu'alaikum wr. wb.
A. Pendahuluan
1. Pengertian
Navigasi bar merupakan elemen penting dalam sebuah website atau aplikasi web. Kali ini kita akan membuat navigasi web menggunakan framework Bootstrap.
2. Latar Belakang
Agar lebih paham lagi tentang semua yang ada di dalam bootstrap.
3. Maksud dan Tujuan
Lebih paham akan navbar.
B. Alat dan Bahan
- PC/Laptop
- Web Browser
- Text Editor
2 jam
D. Tahap Pelaksanaan
1. Pastikan anda sudah mempunyai file bootstrap.
2. Buka text editor anda, lalu ketikan script seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<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>
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>3. Dan ini hasilnya.
E. Kesimpulan
Bootstrap ini cara kerjanya yaitu hanya memanggil yang diperlukan saja. Dan bootstrap pemakaiannya sangat mudah, karena tinggal manggil saja.
F. Referensi
- http://www.proweb.co.id/articles/web_application/navigasi_bootstrap.html
- https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Wassalammu'alaikum wr. wb.
Hai, selamat datang di blog saya. Di blog ini saya berbagi tentang materi apa pun, misalnya : tentang instalasi cms open source. Semoga dalam isi blog ku ini bisa membantu kalian semua yang telah mengunjungi blog saya ini. Terima Kasih sudah mengunjungi blog saya.
0 komentar:
Posting Komentar