Assalamu'alaikum Warohmatullohi Wabarokatuh.
Selamat pagi dan Salam Sejahtera bagi kita semua.
Semoga kita selalu dalam lindungan-Nya. Amin.
Nah pada kesempatan kali ini saya akan berbagi sedikit pengetahuan yang saya tahu dari bootstrap.
Setelah sebelumnya saya berbagi tentang "Belajar Membuat Social Button Dengan Bootstrap " dan pada hari ini kita akan membahas tentang "Membuat Menu Dropdown Dengan Bootstrap".
Berikut adalah tampilan hasil jadi dan struktur folder yang dibutuhkan:
Dan pada tutorial ini saya akan menyertakan DEMO dan DOWNLOAD filenya. Mari lanjut ke script yang digunakan.
Lihat pada bagian bawah tutorial ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Selamat Datang Di Buku Online SMK Negeri 1 Beringin</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/jquery.showpassword.js" type="text/javascript"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<script src="dist/js/sb-admin-2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pass').showPassword('#tampil');
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="#"> BUKU ONLINE </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> <span class="fa fa-home"></span> Beranda </a></li>
<li><a href="#"> <span class="fa fa-user"></span> Profil</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="fa fa-book"></span> Kategory Buku <span class="fa fa-angle-double-down"></span> </a>
<ul class="dropdown-menu">
<li><a href=""> <span class="fa fa-book"></span> Doa </a></li>
<li><a href=""> <span class="fa fa-book"></span> Dongeng </a></li>
<li><a href=""> <span class="fa fa-book"></span> Kamus </a></li>
<li><a href=""> <span class="fa fa-book"></span> Teknologi </a></li>
</ul>
</li>
<li><a href="#"> <span class="fa fa-phone"></span> Kontak</a></li>
</ul>
</div>
</div>
</html>
Keterangan:
# Navbar-inverse digunakan untuk membuat background berwarna hitam.
ganti dengan Navbar-default untuk mendapatkan warna putih abu-abu.
Nah Sekian dari saya.
Selamat pagi dan Salam Sejahtera bagi kita semua.
Semoga kita selalu dalam lindungan-Nya. Amin.
Nah pada kesempatan kali ini saya akan berbagi sedikit pengetahuan yang saya tahu dari bootstrap.
Setelah sebelumnya saya berbagi tentang "Belajar Membuat Social Button Dengan Bootstrap " dan pada hari ini kita akan membahas tentang "Membuat Menu Dropdown Dengan Bootstrap".
Berikut adalah tampilan hasil jadi dan struktur folder yang dibutuhkan:
Lihat pada bagian bawah tutorial ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Selamat Datang Di Buku Online SMK Negeri 1 Beringin</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/jquery.showpassword.js" type="text/javascript"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<script src="dist/js/sb-admin-2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pass').showPassword('#tampil');
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="#"> BUKU ONLINE </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> <span class="fa fa-home"></span> Beranda </a></li>
<li><a href="#"> <span class="fa fa-user"></span> Profil</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="fa fa-book"></span> Kategory Buku <span class="fa fa-angle-double-down"></span> </a>
<ul class="dropdown-menu">
<li><a href=""> <span class="fa fa-book"></span> Doa </a></li>
<li><a href=""> <span class="fa fa-book"></span> Dongeng </a></li>
<li><a href=""> <span class="fa fa-book"></span> Kamus </a></li>
<li><a href=""> <span class="fa fa-book"></span> Teknologi </a></li>
</ul>
</li>
<li><a href="#"> <span class="fa fa-phone"></span> Kontak</a></li>
</ul>
</div>
</div>
</div>
</body></html>
Keterangan:
# Navbar-inverse digunakan untuk membuat background berwarna hitam.
ganti dengan Navbar-default untuk mendapatkan warna putih abu-abu.
Nah Sekian dari saya.
Wassalamu'alaikum Warohmatullohi Wabarokatuh.
Salam blogger teman.
Jangan lupa untuk memberikan komentar Anda disini.
Karena kritik dan saran Anda sangat membantu kemajuan blog ini.
See you!
Jangan lupa untuk memberikan komentar Anda disini.
Karena kritik dan saran Anda sangat membantu kemajuan blog ini.
See you!
Mantab Bro...
ReplyDeletehttp://www.fittraferdiansyah.tk/
Fittra Ferdiansyah