Hallo, pada tutorial kali ini saya akan membahas tentang cara membuat sidebar navigasi dengan class panel pada bootstrap.
Apa kabar teman-teman semuanya, semoga baik, kali ini kita akan belajar lagi cara membuat sidebar navigasi dengan class panel pada bootstrap, sebelum kita praktekan, apa sih itu sidebar?
Sidebar adalah suatu konten pada halaman website yang biasa terletak dibagian samping dari konten, yang tidak jarang terdapat list menu didalamnya, oke untuk lebih jelasnya kita langsung praktekan saja cara membuat sidebar navigasi dengan bootstrap.
Pertama teman-teman harus terlebih dahulu mendownload file bootstrap yang ada di get bootstrap, karena disini saya beranggapan teman-teman sudah memanggil file yang diperlukan dalam menggunakan bootstrap seperti css dan javascript pluginnya bootstrap, jika sudah teman-teman buat sebuah file html dan ketikan script berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="container"> <div class="col-md-4"> <h2>Navigation</h2> <div class="panel panel-default"> <div class="panel-heading">Navigation</div> <div class="panel-body"> <ul> <li class="list-group-item">Home</li> <li class="list-group-item">About</li> <li class="list-group-item">Profile</li> </ul> </div> </div> <div class="col-md-8"> </div> </div> </div> |
Jika sudah silahkan teman-teman silahkan buat satu file lagi untuk css customnya dan ketikan script custom css berikut ini :
1 2 3 4 5 |
ul{padding-left:5px;} .list-group-item{background:#017AF1; color:#fff} .panel-heading{background:#0EA761 !important} .panel-body{border:2px solid #999999} .list-group-item:hover{background:#0DA55F;} |
Jika sudah teman-teman bisa save dan coba jalankan pada browser masing masing, maka hasilnya akan seperti berikut ini :
gimana teman-teman? sangat mudah bukan? dengan bootstrap semua menjadi lebih simple, untuk tutorial kali ini tentang membuat-sidebar-navigasi-dengan-class-panel-pada-bootstrap cukup sampai sini dulu, semoga tutorial kali ini bermanfaat, sampai jumpa pada tutorial berikutnya, terimakasih.