Sudah lama admin tidak memposting pada Blog ini, dikarenakan sedang fokus kuliah dulu yak :D
Oke, tutorial kali ini admin akan membahas bagaimana cara membuat Dropdown menu pada Bootstrap Twitter.
Untuk anda yang beru membaca Tutorial ini alangkah baiknya membaca Tutorial sebelumnya terlebih dahulu.
Oke, langsung saja kita buka aplikasi Adobe Dreamweaver atau text Editor lainnya, seperti Notepad, Notepad++, wordpad dll.
Buat file dropdown.html dan simpan didirektori yang telah kita buat sebelumnya dengan cara File > New > html
Kemudian masukkan source code dibawah ini :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Dropdown Pada Bootstrap Twitter</title> | |
| <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> | |
| <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"> | |
| <link href="css/theme.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="page-header"> | |
| <h1>Contoh Dropdown Pada Bootstrap Twitter</h1> | |
| <p class="lead">Cara menggunakan Dropdown Menu pada Bootstrap Twitter</p> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h4>Dropdown Menu</h4> | |
| <p>Di bawah ini adalah contoh penggunaan Dropdown menu pada Bootstrap Twitter</p> | |
| <div class="dropdown theme-dropdown clearfix"> | |
| <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> | |
| <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> | |
| <li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">New</a></li> | |
| <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Open</a></li> | |
| <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Save</a></li> | |
| <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Save As</a></li> | |
| <li role="presentation" class="divider"></li> | |
| <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Exit</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
Setelah itu kita buat file theme.css simpan difolder css. dengan source code sebagai berikut :
Oke, sekarang kita check hasilnya, jangan lupa jalankan xampp terlebih dahulu dengan service apache dan mysql diaktifkan.
Bila berhasil maka hasilnya akan seperti berikut.
Untuk lebih jelasnya silahkan tonton Video tutorialnya dibawah ini.
Terimakasih
Semoga Bermanfaat
Jangan lupa like, comment and Subscribe blog dan channel youtube ku ya!
Google + : https://plus.google.com/u/0/+esaprasetio
Twitter : http://twitter.com/aphriell_art
IG : @aphriel_art
Pinterest : https://id.pinterest.com/esaprasetio/
Youtube : https://www.youtube.com/c/esaprasetio
Blog :
aprilartwork.blogspot.com for my artwork
aphriellart.blogspot.com for some tutorial
Email : aphriellart@gmail.com
Oke, sekarang kita check hasilnya, jangan lupa jalankan xampp terlebih dahulu dengan service apache dan mysql diaktifkan.
Bila berhasil maka hasilnya akan seperti berikut.
Terimakasih
Semoga Bermanfaat
Jangan lupa like, comment and Subscribe blog dan channel youtube ku ya!
Google + : https://plus.google.com/u/0/+esaprasetio
Twitter : http://twitter.com/aphriell_art
IG : @aphriel_art
Pinterest : https://id.pinterest.com/esaprasetio/
Youtube : https://www.youtube.com/c/esaprasetio
Blog :
aprilartwork.blogspot.com for my artwork
aphriellart.blogspot.com for some tutorial
Email : aphriellart@gmail.com
