A. Pendahuluan
Hallo Teman..!! Apa kabar?? Bertemulagi dengan blog saya kali ini saya akan berbagi tentang kegiatan prakerin di blc telkom klaten
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