Setelah kemarin kita membahas Navbar dan nav tab, saat ini saya akan membahas mengenai button dropdown menggunakan bootstrap. disini tetap akan menggunakan fasilitas dari bbotstrap, jadi kita tinggal menerapkan fasilitas yang sudah ada, cara pemanggilan dan penerapan struktur kodenya.
Perhatikan struktur kode yang ada dibawah ini dan susunan class yang digunakan pada masing masing tag.
<!DOCTYPE html> <html> <head> <title>Bootstrap Button Dropdown</title> <!-- Bootstrap Css --> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <!-- mulai container --> <div class="container"> <h1>Contoh Membuat Button Dropdown Menggunakan Bootstrap</h1> <div class="col-sm-2"> <div class="dropdown"> <button type="button" class="btn btn-danger" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">Menu satu</a></li> <li><a href="">Menu dua</a></li> <li><a href="">Menu tiga</a></li> </ul> </div> </div> <div class="col-sm-2"> <div class="dropdown"> <button type="button" class="btn btn-success" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">Menu satu</a></li> <li><a href="">Menu dua</a></li> <li><a href="">Menu tiga</a></li> </ul> </div> </div> <div class="col-sm-2"> <div class="dropdown"> <button type="button" class="btn btn-warning" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">Menu satu</a></li> <li><a href="">Menu dua</a></li> <li><a href="">Menu tiga</a></li> </ul> </div> </div> <div class="col-sm-2"> <div class="dropdown"> <button type="button" class="btn btn-primary" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">Menu satu</a></li> <li><a href="">Menu dua</a></li> <li><a href="">Menu tiga</a></li> </ul> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
Perhatikan pada
.dropdown pada tag <ul>, class ini digunakan untuk mengidentifikasi dropdown yang akan kita buat. Sedangkan class .dropdown-menu berfungsi sebagai dropdown yang akan kita buat sebagai menu yang muncul nantinya.Sedangkan
data-toggle="dropdwon" berfungsi untuk memanggil button dropdown menu itu sendiri, agar menu dapat tampil digunakanlah kode library tersebut.Hasil dari kode diatas akan seperti gambar dibawah ini.
Demikian yang bisa saya salurkan, semoga bermanfaat dan lancar dalam menerapkan :D
Membuat Button Dropdown Menggunakan Bootstrap
Reviewed by creativekiller
on
January 11, 2018
Rating:
Reviewed by creativekiller
on
January 11, 2018
Rating:
No comments: