Navbar Pada BOOTSTRAP
|
Agustus 22, 2018 |
No Comments |
Assalammu'alaikum wr. wb.
A. Pendahuluan
Navigasi bar merupakan elemen penting dalam sebuah website atau aplikasi
web. Kali ini kita akan membuat navigasi web menggunakan framework
Bootstrap.
B.Latar Belakang
Agar lebih paham lagi tentang semua yang ada di dalam bootstrap. Terutama dalam pembuatan navbar.
C.Maksud dan Tujuan
Lebih paham akan syntax dalam membuat navbar.
D. Alat dan Bahan
- PC/Laptop
- Web Browser
- Text Editor
E. 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="#">Kelas X<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Kelas X-X</a></li>
<li><a href="#">Kelas X-XI</a></li>
<li><a href="#">Kelas X-XII</a></li>
</ul>
</li>
<li><a href="#">Kelas XI</a></li>
<li><a href="#">Kelas XII</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Kelas X" button in the navigation bar.</p>
</div>
</body>
</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="#">Kelas X<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Kelas X-X</a></li>
<li><a href="#">Kelas X-XI</a></li>
<li><a href="#">Kelas X-XII</a></li>
</ul>
</li>
<li><a href="#">Kelas XI</a></li>
<li><a href="#">Kelas XII</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Kelas X" button in the navigation bar.</p>
</div>
</body>
</html>
3. Setelah itu jalankan pada browser anda.
4. Jika berhasil maka akan akan muncul seperti ini.
F. Kesimpulan
Bootstrap ini cara kerjanya yaitu hanya memanggil yang diperlukan saja.
Dan bootstrap pemakaiannya sangat mudah, karena tinggal manggil saja.
G. Referensi
- http://www.proweb.co.id/articles/web_application/navigasi_bootstrap.html
- https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
H.Penutup
Sekian yang dapat saya sampaikan. kurang lebihnya mohon ma'af semoga dapat bermanfa'at.
Wassalammu'alaikum wr. wb
Assalamu'alaikum wr.wb
Hay perkenalkan nama saya Rizka Mala Alfiana my nick name is Rizka, I from in Jepara. Sekian dan Terimakasih.
Wassalamu'alaikum wr.wb
0 comments:
Posting Komentar