Teman-teman semua pada kesempatan kali ini saya akan membagikan tutorial untuk membuat sidebar menggunakan bootstrap
PENGERTIAN
Sidebar adalah kolom yang berisikan menu link yang biasanya berada disebelah kiri maupun kanan. Guna untuk membantu pengguna untuk mempermudah dalam mengakses informasi.
LATAR BELAKANG
Selain dengan menggunakan navigation bar kita bisa menggunakan sidebar, yang memiliki fungsi yang sama.
MAKSUD DAN TUJUAN
Dapat membantu pengguna untuk mengakses informasi selain menggunakan navigation bar.
ALAT DAN BAHAN
- Bootstrap
- Sublime text
- Laptop
Dibawah ini langkah-langkah membuat sidebar :
- Berikut ini adalah contoh script sidebar
<html>
<head>
<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-fluid-fluid="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>
<div class="sidebar-nav">
<div class="well" style="width:300px; padding: 8px 0;">
<ul class="nav nav-list">
<li><a href="#">HOME</a></li>
<li><a href="#">KERANJANG</a></li>
<li><a href="#">PROFIL</a></li>
<li><a href="#">SIGN IN</a></li>
<li><a href="#">LOG OUT</a></li>
</ul>
</div>
</div>
</body>
</html>
- Dari scrip diatas outputnya akan seperti dibawah ini :
- <div class="well" style="width:300px; padding: 8px 0;">, yaitu digunakan untuk menambahkan border bulat sekitar elemen dengan warna latar abu-abu yang disertai dengan beberapa padding.
- <ul class="nav nav-list">, digunakan untuk, agar link menu sidebar urut kebawah.
KESIMPULAN
Selain menggunakan navbar kita bisa menggunakan sidebar.
REFERENSI
http://jagocoding.com/tutorial/914/Responsive_Sidebar_dengan_Bootstrap
0 komentar:
Posting Komentar